|
|
|
可输入的下拉列表框
软件上经常见一个下拉框既可输入又可选择，用起来很舒服，但是网页上的下拉列表框就是实现不了这个功能，遗憾。
前段时间因工作需要，我想做一个即可输又可选的下拉框，去网上搜子大半天，发现网上的贴子都采用了一个办法，就是CSS+JS，就层掩盖，作一个假象出来，不过效果例是实现了，觉得还可以，贴出来大家分享一下。 我用这个加AJAX作了个类似百度搜索时那个文本框的效果，可选可填，填的时候根据输入内容让下拉列表内容变化。等有空了整理一下也发出来分享。 <html> <head> <style> <!-- .cls1 { position:absolute; left:250px; top: 9px; width:216px; height:72px; z-index:1; } .cls2 { position:absolute; left:250px; top:9px; width:95px; height:18px; z-index:2 } input { font-size: 12px; padding-top: 2px; padding-left: 2px;width:127;} //--> </style> </head> <script> <!-- function addOption(pos){ if(event.keyCode==13) { var select_obj = document.getElementById("myselect"); var text_value = document.getElementById("test").value; if (select_obj.length) { for (var i=0;i<select_obj.length;i++) { // 如果已经存在，不添加，直接退出 if (select_obj.options.text==text_value) alert("选项已存在，请重新输入"); } } var the_option= new Option(text_value,text_value); select_obj.add(the_option); select_obj.selectedIndex = select_obj.options.length-1 } } //--> </script> fefef <div class="cls1" style="clip: rect(3 280 21 110)"> <select name="myselect" style="width:127" > <option value="123456">fff</option> </select> </div> <div class="cls2"> <input type="text" name="test" size="20" style="width: 127; height: 23"> </div> </body> </html>
|
||