一般可输入的下拉框都需要模拟，比较繁琐，这里给出一个简单的Demo展现不需要模拟的可输入下拉框。。。
在此使用了大量的blur和focus，主要是从细节考虑，提升用户体验。。。 ^^
如图：
code如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript"><!-- var values = ["test1","test2","test3","test4","test5","test6","test7","test8",]; $(function(){ $("#imgdropdown ").click(function(){ $("#selectspan").show(); $("#select").focus(); }); $("#select").focus(function(){ $(this).attr("size", $("option",$("#select")).size()); }).change(function(){ $(this).attr("size", 1); $("#selectspan").hide(); $("#input").val($("#select").val()); $("#input").focus(); }).blur(function(){ $(this).attr("size", 1); $("#selectspan").hide(); }); for(var i = 0; i < values.length; i++) { $("#select").append("<option value=/"" + values[i] + "/" title='" + values[i] + "'>" + values[i] + "</option>"); } $("#input").keyup(function (){ empty(); }).focus(function (){ empty(); }); }); function empty(){ if($("#input").val().replace(//s/gi,"") != ''){ $("#okbtn").removeAttr("disabled"); }else{ $("#okbtn").attr("disabled","true"); } } function save(){ for(var i = 0; i < values.length; i++) { if($("#input").val() == values[i]) { var isRepeat = confirm(values[i] + " already exists. Do you want to replace it?"); if(!isRepeat){ $("#input").empty(); $("#input").focus(); return; }else{ //submit() window.close(); } } } //submit() window.close(); } // --></mce:script> </head> <body> <div class="saveTag"> <div class="saveTagPanel"> <span id="selectspan" class="none" style="border-right: 1px solid rgb(127, 157, 185); overflow: hidden; position: absolute; top: 30px; width: 259px; left: 69px;display:none"> <select id="select" style="width: 287px; height: 80px;"> </select> </span> <table style="background-color: rgb(240, 245, 249);" mce_style="background-color: #f0f5f9;"> <tbody><tr> <td> Pls input: </td> <td> <table style="border: 1px solid rgb(127, 157, 185);" mce_style="border: 1px solid #7f9db9;" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr> <td class="black"> <input name="box" id="input" style="border: 0px none ; width: 240px; padding-left: 2px;"> </td> <td align="right" width="17"> <img id="imgdropdown" style="padding: 1px;" mce_style="padding: 1px;" src="dropdown.gif" mce_src="dropdown.gif" border="0" height="16" width="16"> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </div> <div class="saveTagBottom"> <button onclick="save()" disabled="disabled" id="okbtn">ok</button> </div> </div> </body></html>
