如何制作可編輯的下拉框？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title><style>/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;}
table{font-size:inherit;}/* Options Templates */
.ac_menucontainer{position:absolute;visibility:hidden;z-index:100;}
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;overflow:hidden;}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;}.backgroundIframe{
position:absolute;
z-index:-1;
width:100%;
height:0;
top:0;left:0;
}
</style> 
<script language=javascript srcccc="JKCombox.js">
var AC_TAB = 9; // make the selection
var AC_ENTER = 13;  // make the selection
var AC_UP_ARROW = 38;    // move the drop down list selection up by one
var AC_DOWN_ARROW = 40;  // move the drop down list selection down by onevar jkCombox_listDiv;
var jkCombox_values;
var jkCombox_obj;
var jkCombox_bgIframe;//for ie bug of <select>
var jkCombox_currentItem;function jkCombox_init(objId,minLengthForCombox,handleForItemHtml,handleForValue)
{
 var obj=document.getElementById(objId);
 if(minLengthForCombox==null) minLengthForCombox=0;
 if(handleForItemHtml==null) handleForItemHtml=jkCombox_handleForItemHtml;
 if(handleForValue==null) handleForValue=jkCombox_handleForValue
 jkCombox_values=eval(objId+"ListArray");
 var containerDiv=document.createElement("div");
 containerDiv.className="ac_menucontainer";
 obj.parentNode.insertBefore(containerDiv,obj);
 var tempStr='<DIV style="FONT-SIZE: 0.9em; Z-INDEX: 1; POSITION: relative; visibility:visible;WIDTH:'+obj.offsetWidth+';height:0px;top:'+obj.offsetHeight+'; ">'
   +'<iframe class="backgroundIframe" id="'+objId+'BgIframe" scrolling="no" frameborder=0 style="display:none;"></iframe> '
   +'<DIV class=ac_menu id="'+objId+'ListDiv" style=" display:none; OVERFLOW-Y:auto; " '
   +'onmouseover="jkCombox_MouseoverListDiv(event)" onmousedown="jkCombox_MousedownListDiv(event);" onscroll="jkCombox_scrollListDiv();">'
   +'</DIV></DIV>';
 containerDiv.innerHTML=tempStr;
 jkCombox_listDiv=document.getElementById(objId+"ListDiv");
 obj.onfocus=jkCombox_Focus;
 obj.onblur=jkCombox_Blur;
 obj.onkeydown=jkCombox_Keydown;
 obj.autoComplete="off";
 obj.minLengthForCombox=minLengthForCombox;
 obj.handleForItemHtml=handleForItemHtml;
 obj.handleForValue=handleForValue;
 obj.onkeyup=jkCombox_Valuechange;
 obj.onmouseup=jkCombox_Valuechange;
}function jkCombox_Focus(event,obj)
{
 event=event||window.event;
 if(obj==null) obj=event.srcElement||event.target;
 jkCombox_listDiv=document.getElementById(obj.id+"ListDiv");
 jkCombox_bgIframe=document.getElementById(obj.id+"BgIframe");
 jkCombox_values=eval(obj.id+"ListArray");
 jkCombox_obj=obj;
 jkCombox_Valuechange(event,obj);
 jkCombox_listDiv.style.display="";
 if(jkCombox_bgIframe){
  jkCombox_bgIframe.style.height=jkCombox_listDiv.offsetHeight;
  jkCombox_bgIframe.style.display="";
 }
}function jkCombox_Blur(event,obj)
{
 event=event||window.event;
 if(obj==null) obj=event.srcElement||event.target;
 if(jkCombox_listDiv==document.activeElement) obj.focus();
 else {
  jkCombox_listDiv.style.display="none";
  if(jkCombox_bgIframe)jkCombox_bgIframe.style.display="none";
 }
}function jkCombox_Valuechange(event,obj)
{
 event=event||window.event;
 if(obj==null) obj=event.srcElement||event.target;
 if(jkCombox_obj != obj) return;
 if(obj.latestValue==obj.value) return;
 obj.latestValue=obj.value;
 var objValue=obj.value;
 if(objValue.length<obj.minLengthForCombox){
  jkCombox_listDiv.innerHTML="";
  jkCombox_listDiv.selectedIndex=-1;
  jkCombox_listDiv.selectedItemIndex=-1;
  return;  
 }
 var objValueHtml=htmlEncode(objValue);
 jkCombox_listDiv.selectedIndex=-1;
 var theLastVisibleIndex=0
 var tempStr=new Array();
 var numOfVisibleItems=0;
 for(theLastVisibleIndex=0;theLastVisibleIndex<jkCombox_values.length;theLastVisibleIndex++)
 {
  if(jkCombox_values[theLastVisibleIndex].indexOf(objValue)==0)
  {
   if(numOfVisibleItems==13){
    tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  indexValue="+theLastVisibleIndex+" id='"+jkCombox_obj.id+"VirtualMoreItems' itemIndex="+numOfVisibleItems+"><b>...More...</b></DIV>";
    numOfVisibleItems++;
    break;
   }
   else{
    tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  indexValue="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+">"+obj.handleForItemHtml(jkCombox_values[theLastVisibleIndex],objValue,objValueHtml,theLastVisibleIndex)+"</DIV>";
    numOfVisibleItems++;
   }
  }
 }
 jkCombox_listDiv.innerHTML=tempStr.join("");
 if(numOfVisibleItems>0) 
 {
  jkCombox_listDiv.selectedIndex=jkCombox_listDiv.childNodes[0].getAttribute("indexValue");
  jkCombox_listDiv.selectedItemIndex=0;
  jkCombox_listDiv.childNodes[0].className="ac_menuitem_selected";
  jkCombox_AdjustScroll();
 }
 else{
  jkCombox_listDiv.selectedIndex=-1;
  jkCombox_listDiv.selectedItemIndex=-1; 
 }
 jkCombox_listDiv.style.display="";
 jkCombox_listDiv.style.height="auto";
 if(jkCombox_listDiv.offsetHeight>220) jkCombox_listDiv.style.height=220;
 if(jkCombox_bgIframe){
  jkCombox_bgIframe.style.height=jkCombox_listDiv.offsetHeight;
  jkCombox_bgIframe.style.display="";
 }
}function jkCombox_Keydown(event,obj)
{
 if(jkCombox_listDiv==null) return ;
 event=event||window.event;
 if(obj==null) obj=event.srcElement||event.target;
 var keyCode=event.keyCode;
 if(keyCode==AC_ENTER) {
  keyCode=AC_TAB;
  if(document.all) event.keyCode=AC_TAB;//待改进
 }
 if(keyCode==AC_TAB && jkCombox_listDiv.selectedIndex!=-1) 
 {
  if(obj.value!=jkCombox_values[jkCombox_listDiv.selectedIndex]) obj.value=jkCombox_obj.handleForValue(jkCombox_listDiv.selectedIndex);
  return ;
 }
 if(keyCode==AC_UP_ARROW && jkCombox_listDiv.selectedItemIndex>0)
 {
  jkCombox_listDiv.childNodes[jkCombox_listDiv.selectedItemIndex].className="ac_menuitem";
  jkCombox_listDiv.selectedItemIndex=jkCombox_listDiv.selectedItemIndex*1-1;
  jkCombox_listDiv.selectedIndex=jkCombox_listDiv.childNodes[jkCombox_listDiv.selectedItemIndex].getAttribute("indexValue");
  jkCombox_listDiv.childNodes[jkCombox_listDiv.selectedItemIndex].className="ac_menuitem_selected";
  jkCombox_AdjustScroll();
 } if(keyCode==AC_DOWN_ARROW && jkCombox_listDiv.selectedItemIndex<jkCombox_listDiv.childNodes.length-1)
 {
  jkCombox_listDiv.childNodes[jkCombox_listDiv.selectedItemIndex].className="ac_menuitem";
  jkCombox_listDiv.selectedItemIndex=jkCombox_listDiv.selectedItemIndex*1+1;
  jkCombox_listDiv.selectedIndex=jkCombox_listDiv.childNodes[jkCombox_listDiv.selectedItemIndex].getAttribute("indexValue");
  jkCombox_listDiv.childNodes[jkCombox_listDiv.selectedItemIndex].className="ac_menuitem_selected";
  jkCombox_AdjustScroll();
 }}

解决方案 »

  1.   


    function jkCombox_handleForItemHtml(itemValue,objValue,objValueHtml,index)
    {
     if(objValue.length>0) return ("<b>"+objValueHtml+"</b>"+htmlEncode(itemValue.substr(objValue.length)));
     else return htmlEncode(itemValue);
    }function jkCombox_handleForValue(index){
     return jkCombox_values[index]
    }
    function jkCombox_getIndexByEvent(event){
     var srcElement=event.srcElement||event.target;
     for(var i=0;i<5;i++){
      if(srcElement==jkCombox_listDiv) break;
      if((srcElement.getAttribute("indexValue")>-1) && srcElement.tagName=="DIV") return srcElement.getAttribute("indexValue");
      srcElement=srcElement.parentNode;
     }
     return -1;
    }function jkCombox_scrollListDiv()
    {
     var virtualMoreItemsObj=document.getElementById(jkCombox_obj.id+"VirtualMoreItems");
     if(virtualMoreItemsObj==null) return;
     var theLastVisibleIndex=virtualMoreItemsObj.getAttribute("indexValue")*1;
     var objValue=jkCombox_obj.value;
     var objValueHtml=htmlEncode(objValue);
     var tempStr=new Array();
     var numOfVisibleItems=virtualMoreItemsObj.getAttribute("itemIndex")*1;
     for(;theLastVisibleIndex<jkCombox_values.length;theLastVisibleIndex++)
     {
      if(jkCombox_values[theLastVisibleIndex].indexOf(objValue)==0)
      {
       if(numOfVisibleItems==203){
        tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  indexValue="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+" onmousedown='jkCombox_ShowAllItems(this);'><b>...Click to show all items...</b></DIV>";
        numOfVisibleItems++;
        break;
       }
       else{
        tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  indexValue="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+">"+jkCombox_obj.handleForItemHtml(jkCombox_values[theLastVisibleIndex],objValue,objValueHtml,theLastVisibleIndex)+"</DIV>";
        numOfVisibleItems++;
       }
      }
     }
     setElementOuterHtml(virtualMoreItemsObj,tempStr.join(""));
    }function jkCombox_ShowAllItems(obj)
    {
     var virtualMoreItemsObj=obj;
     if(virtualMoreItemsObj==null) return;
     var theLastVisibleIndex=virtualMoreItemsObj.getAttribute("indexValue")*1;
     var objValue=jkCombox_obj.value;
     var objValueHtml=htmlEncode(objValue);
     var tempStr=new Array();
     var numOfVisibleItems=virtualMoreItemsObj.getAttribute("itemIndex")*1;;
     for(;theLastVisibleIndex<jkCombox_values.length;theLastVisibleIndex++)
     {
      if(jkCombox_values[theLastVisibleIndex].indexOf(objValue)==0)
      {
       tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  indexValue="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+">"+jkCombox_obj.handleForItemHtml(jkCombox_values[theLastVisibleIndex],objValue,objValueHtml,theLastVisibleIndex)+"</DIV>";
       numOfVisibleItems++;
      }
     }
     setElementOuterHtml(virtualMoreItemsObj,tempStr.join(""));
     if(event.preventDefault) preventDefault();
     else event.cancelBubble=true;
    }
    function jkCombox_MouseoverListDiv(event)
    {
     var srcElement=event.srcElement||event.target;
     for(var i=0;i<5;i++){
      if(srcElement==jkCombox_listDiv) return;
      if(srcElement.getAttribute("indexValue")!=null && srcElement.tagName=="DIV") {
       if(jkCombox_currentItem!=null && jkCombox_currentItem.style!=null) 
        jkCombox_currentItem.style.backgroundColor="";
       jkCombox_currentItem=srcElement;
       jkCombox_currentItem.style.backgroundColor="#E6E6E6";
       return;
      }
     }
    }function jkCombox_MousedownListDiv(event)
    {
     if(event.srcElement==jkCombox_listDiv) return;
     else{
      var selectedIndex=jkCombox_getIndexByEvent(event);
      if(selectedIndex>=0) jkCombox_obj.value=jkCombox_obj.handleForValue(selectedIndex);
     }
    }
    function jkCombox_AdjustScroll()
    {
     if ( jkCombox_listDiv==null || jkCombox_listDiv.selectedItemIndex==-1 || jkCombox_listDiv.childNodes.length==0 ) return ;
     var i=jkCombox_listDiv.selectedItemIndex;
     if((jkCombox_listDiv.childNodes[i].offsetTop<jkCombox_listDiv.scrollTop)||(jkCombox_listDiv.childNodes[i].offsetTop>jkCombox_listDiv.scrollTop+200))
      jkCombox_listDiv.childNodes[i].scrollIntoView();
    }function htmlEncode(str)
    {
     if(str==null) return "";
     str=str.replace(/&/ig,"&amp;")
     str=str.replace(/</ig,"&lt;")
     str=str.replace(/>/ig,"&gt;");
     str=str.replace(/"/ig,"&quot;");
     return str;
    }
     
    function setElementOuterHtml(obj,htmlStr){
     if(obj.outerHTML) {
      obj.outerHTML=htmlStr;
     }
     else{
      var tempRange = document.createRange();
      tempRange .setStartBefore(obj);
      var tempFragment = tempRange .createContextualFragment(htmlStr);
      obj.parentNode.replaceChild(tempFragment , obj);
      tempRange.detach();
     }
    }</script> 
    </head> 
    <body >
     
    <div style="font-size:10pt;">
    注1：部分CSS来自yahoo:http://us.f901.mail.yahoo.com/ym/Compose?YY=123456 <br/>       
    注2：function jkCombox_init(objId,minLengthForCombox,handleForItemHtml,handleForValue)参数说明：<br/>  
    &nbsp;&nbsp;objId:需要添加combox的input的id,可选项为名为“[objId]ListArray”的数组.<br/>  
    &nbsp;&nbsp;minLengthForCombox:出现combox时的最小值长度，默认为0<br/>  
    &nbsp;&nbsp;handleForItemHtml:用户可以自定义combox的menu,具体参看默认值及示例<br/>  
    &nbsp;&nbsp;handleForValue:用户可以自定义点击combox里的一项时，返回到input的值<br/>  
    注3：先只列出可见的十条，scroll时列出200条，如果还有更多，让用户决定是否将所有的选项列出。<br/> 
    注4：选项过多时，建议不要用Combox，或采用ajax过滤（在更新ListDivItems前更新[objId]ListArray），本示例未包含相关代码。<br/> <br/> 
    注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>        
    注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20JKCombox">[email protected]</a><br/>     
    <hr/> 
    </div>  
    <form name="Compose" id="Compose" method=post action="/ym/Compose?YY=61185"><table cellpadding=4 cellspacing=0 border=0 width="100%">
    <tr>
    <td >Mail To:</td>
    <td style="padding-top:0px;" >
    <input name="To" style="width:300" id="tofield" value=1 >
    <script language=javascript defer >
    var tofieldListArray=["[email protected]","[email protected]","[email protected]","深圳市科技园","深圳市罗湖东门","深圳市罗\"湖东门",
    "1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009",
    "1010", "1011", "1012", "1013", "1014", "1015", "1016", "1017", "1018", "1019",
    "1020", "1021", "1022", "1023", "1024", "1025", "1026", "1027", "1028", "1029",
    "1030", "1031", "1032", "1033", "1034", "1035", "1036", "1037", "1038", "1039",
    "1040", "1041", "1042", "1043", "1044", "1045", "1046", "1047", "1048", "1049",
    "1050", "1051", "1052", "1053", "1054", "1055", "1056", "1057", "1058", "1059",
    "1060", "1061", "1062", "1063", "1064", "1065", "1066", "1067", "1068", "1069",
    "1070", "1071", "1072", "1073", "1074", "1075", "1076", "1077", "1078", "1079",
    "1080", "1081", "1082", "1083", "1084", "1085", "1086", "1087", "1088", "1089",
    "1090", "1091", "1092", "1093", "1094", "1095", "1096", "1097", "1098", "1099",
    "1100", "1101", "1102", "1103", "1104", "1105", "1106", "1107", "1108", "1109",
    "1110", "1111", "1112", "1113", "1114", "1115", "1116", "1117", "1118", "1119"
    ];
    jkCombox_init("tofield");
    </script> 
    </td>
    </tr>
    <tr>
    <td >Mail Cc:</td>
    <td style="padding-top:0px;" >
    <input name="Cc" style="width:300" id="ccfield" value=a >
    <script language=javascript defer >
    var ccfieldListArray=tofieldListArray;
    function myHandelForItemHtml(itemValue,objValue,objValueHtml,index)
    {
    return ("<font style='font-size:10px;color:red;width:50px;border:1px solid #3162A6;text-align:right;'>"+(index+1)+"</font><b>"+objValueHtml+"</b>"+htmlEncode(itemValue.substr(objValue.length)));
    }
    jkCombox_init("ccfield",1,myHandelForItemHtml);
    </script> </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td ><select ><option>test test test</option></select></td>
    </tr>
    <tr>
    <td colspan=2><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>
    </tr>
    </table>
    </form>
    </body>
    </html>  
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>注意</title>
    </head><body>
    强列建议慎用JKCombox,
    请先检查是否可以用以下方案：
    <hr/>
    1.<br/>
    文化程度：
    <select onchange="if(this.value=='其它') this.nextSibling.style.display=''; else this.nextSibling.style.display='none'">
    <option value=""></option><option value="小学">小学</option><option value="中学">中学</option><option value="大学">大学</option><option value="其它">其它</option> 
    </select><input style="display:none">
    <hr/>
    2.<br/>
    <input type=radio name=etype checked onclick="if(this.checked) { wenhuachendu1[0].disabled=false;wenhuachendu1[1].disabled=true;}">文化程度(常见)：
    <select id=wenhuachendu1 >
    <option value=""></option><option value="小学">小学</option><option value="中学">中学</option><option value="大学">大学</option><option value="其它">其它</option> 
    </select>
    <br>
    <input type=radio name=etype onclick="if(this.checked) { wenhuachendu1[0].disabled=true;wenhuachendu1[1].disabled=false;}" >文化程度(特别)：
    <input id=wenhuachendu1 disabled >
    </body></html>