■■请教：网页中的下拉列表，能不能变成可编辑的风格？■■

可以.你把下面的代码(不是我写的,是我copy别人的)复制到一个html文件再用IE打开看看.
<html>
<head>
<SCRIPT TYPE="text/javascript">
function getLeftPostion( theObj )
{
  var pos = 0;
  while ( theObj != null )
  {
    pos += theObj.offsetLeft;
    //get the Object which contain theObj.
    theObj = theObj.offsetParent;
  }
  return pos;
}
function getTopPostion( theObj )
{
  var pos = 0; 
  while ( theObj != null )
  {
    pos += theObj.offsetTop;
    //get the Object which contain theObj.
    theObj = theObj.offsetParent;
  }
  return pos;
}
function checkVersion()
{
  var isBadVersion=true;
  var curVer=navigator.appVersion;
  var pos=parseInt(curVer.indexOf("MSIE"));
  if (pos>=1)
  {
    var intVer=parseInt(curVer.charAt(pos+5));
    if (intVer>=5)
    { isBadVersion=false;}
  }
  if (isBadVersion)
  {
    var msg="This page may not be displayed properly:\n"+
            " This product requires Microsoft Internet Explorer 5 or later browser only.";
    alert(msg); 
  } 
}//check the browser version
checkVersion();// the array of comboBoies
theArray = new Array();function combobox(objId, objHandler)
{
  this.comObj = document.all[objId]; 
  this.comObj.selectedIndex = -1; 
  this.getValue = getValue; 
  this.doResize = doResize; 
  this.doChange = doChange; 
  this.loseFocus = loseFocus; 
  this.doSelectIdx = doSelectIdx; 
  this.focus = focus;   var strMsg="";//------------------------------------------------------------------------------------------------------
// create the text object
//------------------------------------------------------------------------------------------------------
  var txtObjIdName = objId + "_text";   if (document.all[txtObjIdName] != null)
  {
    strMsg="The following id: '" + txtObjIdName +"' is used internally by the Combo Box!\r\n"+
           "Use of this id in your page may cause malfunction. Please use another id for your controls.";
    alert(strMsg);
  }  var txtInner = "<INPUT type='text' id=" + txtObjIdName + " name=" + txtObjIdName +
                 " onblur='" + objHandler + ".loseFocus()' " + 
                 " style='display: none; position: absolute' value='' >";  this.comObj.insertAdjacentHTML("afterEnd", txtInner);   this.txtObj = document.all[txtObjIdName];
//------------------------------------------------------------------------------------------------------
// end
//------------------------------------------------------------------------------------------------------  this.beResizing = false; 
  this.doResize(); 
  theArray[theArray.length] = this; 
}function loseFocus()
{
  var theComObj = this.comObj;
  var theTxtObj = this.txtObj;
  var i;
  theComObj.selectedIndex = -1;  if (theTxtObj.value == "")
  { return; }  var optLen = theComObj.options.length;
  for (i=0; i<optLen; i++)
  {
    var comVal = theComObj.options[i].text;
    var txtVal = theTxtObj.value;    if (comVal == txtVal)
    { theComObj.selectedIndex = i;
      return;
    }
  }
}function doResize()
{
  if (!this.beResizing)
  {
    this.beResizing = true;
    this.txtObj.style.display="none";
    this.comObj.style.position="static";
    this.txtObj.style.posLeft = getLeftPostion(this.comObj);
    this.txtObj.style.posTop = getTopPostion(this.comObj) + 1;
    this.txtObj.style.posWidth = this.comObj.offsetWidth - 16;
    this.txtObj.style.posHeight = this.comObj.offsetHeight;
    this.comObj.style.position ="absolute";
    this.comObj.style.posLeft = this.txtObj.style.posLeft;
    this.comObj.style.posTop = this.txtObj.style.posTop;
    this.offWidth = this.comObj.offsetWidth;
    var strRect = "rect(0 "+(this.comObj.offsetWidth)+" "+ this.comObj.offsetHeight + 
               " "+(this.txtObj.style.posWidth - 2 )+")";    this.comObj.style.clip = strRect;
    this.txtObj.style.display="";
    this.beResizing = false;
  }
}function doChange()
{
  var idx = this.comObj.selectedIndex;
  var opt = this.comObj.options[idx];
  this.txtObj.value = opt.text;
  this.txtObj.focus();
  this.txtObj.select();
  this.comObj.selectedIndex=-1;
}function getValue()
{ return this.txtObj.value; }function doSelectIdx(i)
{
  var optLen = this.comObj.options.length;  if ((i >=0) && (i < optLen))
  { this.comObj.selectedIndex = i;
    this.txtObj.value = this.comObj.options[i].text;
    return;
  }  this.txtObj.value = "";
}
function focus()
{ this.txtObj.focus(); }/* resize all combobox when window be resized */
function resetAllSize()
{
  var i; 
  for (i=0; i < theArray.length; i++)
  {
    theArray[i].doResize(); 
  } 
}</SCRIPT></head>
<body>
<BODY onload="init();">
<form name="form1">
  <table border="1" width="395">
    <tr> 
      <td width="140">input web address:</td> 
      <td width="216"> 
        <select id="comboBox1" style="POSITION: absolute;
           onResize="if (combox1!=null) {combox1.doResize();}"
           onChange="if (combox1!=null) {combox1.doChange();}" name="select2">
          <option value=www.5DeDesign.com selected>www.5DeDesign.com</option>
          <option value=www.baojidesign.com>www.baojidesign.com</option>
          <option value=www.sina.com.cn>www.sina.com.cn</option>
        </select></td>
    </tr>
    <tr> 
      <td width="140">input web address:</td> 
      <td height="200" width="216">
        <select id="comboBox2" style="POSITION: absolute"
           onResize="if (combox2!=null) {combox2.doResize();}"
           onChange="if (combox2!=null) {combox2.doChange();}" name="select">
          <option value=www.5DeDesign.com selected>www.5DeDesign.com</option>
          <option value=www.baojidesign.com>www.baojidesign.com</option>
          <option value=www.sina.com.cn>www.sina.com.cn</option>
        </select></td>
    </tr>
  </table>
  <input type="submit" value="submit">
  <SCRIPT>
var combox1,combox2; 
function init()
{
  combox1 = new combobox("comboBox1", "combox1");
  combox1.doSelectIdx(-1);   combox2 = new combobox("comboBox2", "combox2");
  combox2.doSelectIdx(-1); 
}
  </SCRIPT>
</form></body>
</body>

解决方案 »

  1.   

    下面是结合javascript实现的,(不是我写的)<html>
    <head>
    <SCRIPT TYPE="text/javascript">
    function getLeftPostion( theObj )
    {
      var pos = 0;
      while ( theObj != null )
      {
        pos += theObj.offsetLeft;
        //get the Object which contain theObj.
        theObj = theObj.offsetParent;
      }
      return pos;
    }
    function getTopPostion( theObj )
    {
      var pos = 0; 
      while ( theObj != null )
      {
        pos += theObj.offsetTop;
        //get the Object which contain theObj.
        theObj = theObj.offsetParent;
      }
      return pos;
    }
    function checkVersion()
    {
      var isBadVersion=true;
      var curVer=navigator.appVersion;
      var pos=parseInt(curVer.indexOf("MSIE"));
      if (pos>=1)
      {
        var intVer=parseInt(curVer.charAt(pos+5));
        if (intVer>=5)
        { isBadVersion=false;}
      }
      if (isBadVersion)
      {
        var msg="This page may not be displayed properly:\n"+
                " This product requires Microsoft Internet Explorer 5 or later browser only.";
        alert(msg); 
      } 
    }//check the browser version
    checkVersion();// the array of comboBoies
    theArray = new Array();function combobox(objId, objHandler)
    {
      this.comObj = document.all[objId]; 
      this.comObj.selectedIndex = -1; 
      this.getValue = getValue; 
      this.doResize = doResize; 
      this.doChange = doChange; 
      this.loseFocus = loseFocus; 
      this.doSelectIdx = doSelectIdx; 
      this.focus = focus;   var strMsg="";//------------------------------------------------------------------------------------------------------
    // create the text object
    //------------------------------------------------------------------------------------------------------
      var txtObjIdName = objId + "_text";   if (document.all[txtObjIdName] != null)
      {
        strMsg="The following id: '" + txtObjIdName +"' is used internally by the Combo Box!\r\n"+
               "Use of this id in your page may cause malfunction. Please use another id for your controls.";
        alert(strMsg);
      }  var txtInner = "<INPUT type='text' id=" + txtObjIdName + " name=" + txtObjIdName +
                     " onblur='" + objHandler + ".loseFocus()' " + 
                     " style='display: none; position: absolute' value='' >";  this.comObj.insertAdjacentHTML("afterEnd", txtInner);   this.txtObj = document.all[txtObjIdName];
    //------------------------------------------------------------------------------------------------------
    // end
    //------------------------------------------------------------------------------------------------------  this.beResizing = false; 
      this.doResize(); 
      theArray[theArray.length] = this; 
    }function loseFocus()
    {
      var theComObj = this.comObj;
      var theTxtObj = this.txtObj;
      var i;
      theComObj.selectedIndex = -1;  if (theTxtObj.value == "")
      { return; }  var optLen = theComObj.options.length;
      for (i=0; i<optLen; i++)
      {
        var comVal = theComObj.options[i].text;
        var txtVal = theTxtObj.value;    if (comVal == txtVal)
        { theComObj.selectedIndex = i;
          return;
        }
      }
    }function doResize()
    {
      if (!this.beResizing)
      {
        this.beResizing = true;
        this.txtObj.style.display="none";
        this.comObj.style.position="static";
        this.txtObj.style.posLeft = getLeftPostion(this.comObj);
        this.txtObj.style.posTop = getTopPostion(this.comObj) + 1;
        this.txtObj.style.posWidth = this.comObj.offsetWidth - 16;
        this.txtObj.style.posHeight = this.comObj.offsetHeight;
        this.comObj.style.position ="absolute";
        this.comObj.style.posLeft = this.txtObj.style.posLeft;
        this.comObj.style.posTop = this.txtObj.style.posTop;
        this.offWidth = this.comObj.offsetWidth;
        var strRect = "rect(0 "+(this.comObj.offsetWidth)+" "+ this.comObj.offsetHeight + 
                   " "+(this.txtObj.style.posWidth - 2 )+")";    this.comObj.style.clip = strRect;
        this.txtObj.style.display="";
        this.beResizing = false;
      }
    }function doChange()
    {
      var idx = this.comObj.selectedIndex;
      var opt = this.comObj.options[idx];
      this.txtObj.value = opt.text;
      this.txtObj.focus();
      this.txtObj.select();
      this.comObj.selectedIndex=-1;
    }function getValue()
    { return this.txtObj.value; }function doSelectIdx(i)
    {
      var optLen = this.comObj.options.length;  if ((i >=0) && (i < optLen))
      { this.comObj.selectedIndex = i;
        this.txtObj.value = this.comObj.options[i].text;
        return;
      }  this.txtObj.value = "";
    }
    function focus()
    { this.txtObj.focus(); }/* resize all combobox when window be resized */
    function resetAllSize()
    {
      var i; 
      for (i=0; i < theArray.length; i++)
      {
        theArray[i].doResize(); 
      } 
    }</SCRIPT></head>
    <body>
    <BODY onload="init();">
    <form name="form1">
      <table border="1" width="395">
        <tr> 
          <td width="140">input web address:</td> 
          <td width="216"> 
            <select id="comboBox1" style="POSITION: absolute;
               onResize="if (combox1!=null) {combox1.doResize();}"
               onChange="if (combox1!=null) {combox1.doChange();}" name="select2">
              <option value=www.5DeDesign.com selected>www.5DeDesign.com</option>
              <option value=www.baojidesign.com>www.baojidesign.com</option>
              <option value=www.sina.com.cn>www.sina.com.cn</option>
            </select></td>
        </tr>
        <tr> 
          <td width="140">input web address:</td> 
          <td height="200" width="216">
            <select id="comboBox2" style="POSITION: absolute"
               onResize="if (combox2!=null) {combox2.doResize();}"
               onChange="if (combox2!=null) {combox2.doChange();}" name="select">
              <option value=www.5DeDesign.com selected>www.5DeDesign.com</option>
              <option value=www.baojidesign.com>www.baojidesign.com</option>
              <option value=www.sina.com.cn>www.sina.com.cn</option>
            </select></td>
        </tr>
      </table>
      <input type="submit" value="submit">
      <SCRIPT>
    var combox1,combox2; 
    function init()
    {
      combox1 = new combobox("comboBox1", "combox1");
      combox1.doSelectIdx(-1);   combox2 = new combobox("comboBox2", "combox2");
      combox2.doSelectIdx(-1); 
    }
      </SCRIPT>
    </form></body>
    </body>