可输入、可编辑的Select

給你一個別人的例子<body onload="s1.focus();"> <script language="JavaScript">
<!--
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 13:
//Enter;
sel.options[sel.length] = new Option("","",false,true);
event.returnValue = false;
break;
case 27:
//Esc;
alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + ";");
event.returnValue = false;
break;
case 46:
//Delete;
if(confirm("?除?前??!?"))
{
sel.options[sel.selectedIndex] = null;
if(sel.length>0)
{
sel.options[0].selected = true;
}
}
event.returnValue = false;
break;
case 8:
//Back Space;
var s = sel.options[sel.selectedIndex].text;
sel.options[sel.selectedIndex].text = s.substr(0,s.length-1);
event.returnValue = false;
break;
}

}
function catch_press(sel)
{
sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
event.returnValue = false;
}
//-->
</script>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
<BR>按回車輸入新內容，按DEL刪除選中內容
</body>

解决方案 »

  1.   

    http://webfx.eae.net/dhtml/combobox/combo_demo.htm
      

  2.   

    <OBJECT id=cbo classid=clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3 VIEWASTEXT>
    </OBJECT>
    <script>
    cbo.AddItem("1");
    cbo.AddItem("2");
    cbo.AddItem("3");
    cbo.AddItem("4");
    </script>
      

  3.   

    我这有代码，完全基于javascript和html，给你发一份？
      

  4.   

    to：flyycyu
    我的email：[email protected]，3Q！
      

  5.   

    http://www.csdn.net/develop/Read_Article.asp?Id=15197
      

  6.   

    请给我发一份，[email protected]
      

  7.   

    <OBJECT id=cbo classid=clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3 VIEWASTEXT>
    </OBJECT>
    <script>
    cbo.AddItem("1");
    cbo.AddItem("2");
    cbo.AddItem("3");
    cbo.AddItem("4");
    </script>请问一下，这个Forms.ComboBox.1还有什么属性与方法？
    我MSDN上找不到
    =======================
       ◢◣。       ◢◣。
      ◢★◣。     ◢★◣。
     ◢■■◣。   ◢■■◣。
    ◢■■■◣。 ◢■■■◣。
    ︸︸||︸︸ !!︸︸||︸︸
    愿您有快乐的每一天 ^_^!!
      

  8.   

    不知道你手上有VB没有，把这个控件放到VB一个上打****.属性和方法就自动出来了。
      

  9.   

    由于这是我一个日历组件中截取下来的，所以美观不够，你改改吧
    ----------------------------
    <html>
    <head>
    <title>日历</title>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <META NAME="Copy Right" CONTENT="Baby Studio">
    <META NAME="Author" CONTENT="Pan Yingjie">
    <META NAME="Keywords" CONTENT="calendar">
    <META NAME="Description" CONTENT="calendar">
    <style>.inputLine
    {
        BORDER-RIGHT: black 0px dotted;
        BORDER-TOP: black 0px;
        BORDER-LEFT: black 0px dotted;
        BORDER-BOTTOM: #6babeb 1px solid;
        BACKGROUND-COLOR: #ffffff
    }
    .inputBorder
    {
        BORDER-RIGHT: #6babeb 1px solid;
        BORDER-TOP: #6babeb 1px solid;
        BORDER-LEFT: #6babeb 1px solid;
        COLOR: #000000;
        BORDER-BOTTOM: #6babeb 1px solid;
        BACKGROUND-COLOR: #ffffff
    }
    SPAN
    {
        FONT-SIZE: 12px;
        CURSOR: hand
    }
    </style>
    <script language=javascript>
    document.onclick=mouseClick;
    today=new Date();
    selectY_ChangeRange(today.getFullYear());
    function mouseClick(){
      var srcOnClick=window.event.srcElement.tagName;
      var idOnClick=window.event.srcElement.id;
      switch(srcOnClick){
      case "INPUT" :
        showSelect(idOnClick);
        break;
      case "SELECT":
        inputThisValue(idOnClick);
        YearOrMonthChange();
        break;
      default:
        LayerY.style.visibility="hidden";
        LayerM.style.visibility="hidden";
      }
    }
    function inputThisValue(selectName)
    {
      if(selectName=="selectY"){
        yearI.value=selectY.value;
        LayerY.style.visibility="hidden";
      }
      if(selectName=="selectM"){
        monthI.value=selectM.value;
        LayerM.style.visibility="hidden";
      }
    }
    function showSelect(inputName)
    {
      if(inputName=="yearI"){
        LayerM.style.visibility="hidden";
        if(LayerY.style.visibility=="visible")
          LayerY.style.visibility="hidden";
        else
          LayerY.style.visibility="visible";
      }
      if(inputName=="monthI"){
        LayerY.style.visibility="hidden";
        if(LayerM.style.visibility=="visible")
          LayerM.style.visibility="hidden";
        else
          LayerM.style.visibility="visible";
      }
    }
    function YearOrMonthChange()
    {  
      var year_Map=yearI.value;
      var month_Map=monthI.value;
      var date_Map;
      var ifError="noError";
      for(i=1;i<43;i++){
        if(document.all("area"+i).style.border!=""){
          date_Map=document.all("areaText"+i).innerHTML;
          break;
        }    
      }  
      if(month_Map<1 || month_Map>12)
        ifError="Error";
      if(year_Map<10)
        ifError="Error";
      if(year_Map>99 && year_Map<1910)
        ifError="Error";  
      var dateThis=new Date(year_Map,month_Map-1,date_Map);
      if(dateThis=="NaN"){
        var dateThis=new Date(year_Map,month_Map,1);
        if(dateThis=="NaN")
          ifError="Error";
      }
      if(ifError=="Error")
        alert("请输入有效的年、月数值。");
      else{
        year_Map=dateThis.getYear();
        selectY_ChangeRange(yearI.value);
        month_Map=dateThis.getMonth();
        month_Map++;
        date_Map=dateThis.getDate();
        if(year_Map<2000)
          year_Map="19"+year_Map;
        if(month_Map<10)
          month_Map="0"+month_Map;
        if(date_Map<10)
          date_Map="0"+date_Map;
        yearI.value=year_Map;
        monthI.value = month_Map;  
        showCalendarMap(year_Map+"年"+month_Map+"月"+date_Map+"日");
      }
    }
    function selectY_ChangeRange(CY)
    {
      var currentYear=CY;
      var yearBegin=0;
      if(currentYear-3>=1910)
        yearBegin=currentYear-3;
      else
        yearBegin=1910;
      for(var i=0;i<10;i++){
        selectY.options[i].innerHTML=yearBegin;
        selectY.options[i].value=yearBegin;
        yearBegin++;
      }  
    }
    </script>
    </head>
    <body leftmargin=0 topmargin=0 rightmargin=0>
    <table width=100% bgcolor=#99ccff><tr><td height=15>日 历</td><td height=15 id=currentdate></td></tr></table>
    <div id=dateMapDivBlock style="display:block">
    <table cellspacing="1" cellpadding="1">
      <tr> 
        <td colspan="5" height="25" style="font-size:12px"> 
          <input id="yearI" type="text" name="yearI" maxlength="4" style="width:30" class="inputLine" onchange=YearOrMonthChange()>
          年 
          <input id="monthI" type="text" name="monthI" maxlength="2" style="width:20" class="inputLine" onchange=YearOrMonthChange()>
          月</td>
        <td width="20" height="25" onclick=scrollMonth(-1) style="cursor: hand">&lt;</td>
        <td width="20" height="25" onclick=scrollMonth(1) style="cursor: hand">&gt;</td>
      </tr>
    </table>
    </div>
    <div id="LayerY" style="position:absolute; width:45px; height:19px; z-index:1; left: 0px; top: 45px; visibility: hidden"> 
      <select id="selectY" name="selectY" size=10 style="width:40" onclick=inputThisValue(this.name)>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
      </select>
    </div>
    <div id="LayerM" style="position:absolute; width:35px; height:18px; z-index:2; left: 50px; top: 45px; visibility: hidden"> 
      <select id="selectM" name="selectM" size=12 style="width:30" onclick=inputThisValue(this.name)>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
    </div>
    <input id=dateSelectedI type=hidden value="2002-11-22">
    </body>
    </html>