可输入的select下拉框

最新推荐文章于 2023-02-06 16:55:13 发布

iteye_16325

最新推荐文章于 2023-02-06 16:55:13 发布

阅读量255

点赞数

分类专栏： JavaScript 文章标签： IE Firefox QQ IDEA HTML

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种可在标准HTML select元素中直接输入文本的方法，并保持原有下拉选项不变的功能。通过简单的JavaScript代码实现，允许用户在没有匹配选项时自定义选择项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当select下拉框中没有要选择的信息项时，可以直接在select中输入自己想要得信息项。

在输入信息项时，不改变select下拉框中原有的信息项。

通过Backspace键可以清除刚才输入的信息项，以便重新输入。如果不清除，再输入信息时，会在原来输入的基础之上继续添加信息。如：原来手动输入信息是111，如果不清除再输入222时，信息项就变成111222

<html>
<head>
<title>可输入的select下拉框</title>
</head>
<script>
   
</script>
<body >
<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" οnkeydοwn="if(event.keyCode == 8){this.options[0].text = '';}" οnkeypress="writeSelect(this)">
    <option value=""></option>
    <option value="11">11</option>
    <option value="22">22</option>
    <option value="33">33</option>
</select>

<input type="button" value="点我" οnclick="ttt();"/>

<script>
   
    function writeSelect(obj){
        obj.options[0].selected = "select";
        obj.options[0].text = obj.options[0].text + String.fromCharCode(event.keyCode);
        event.returnValue=false;
        return obj.options[0].text;
    }

    function ttt(){
        var ss = document.getElementById("aa").value;
        var jg = "";
       
        if(ss == ""){
            var aas = writeSelect(document.getElementById("aa"));
            jg = aas;
        }else{
            jg =     document.getElementById("aa").value;
        }
       
      alert(jg);
}
    </script>

</body>
</html>

代码只是为了展示select下拉框可输入情况，具体一些细节方面，有待完善。