下拉框增加可输入文本

下拉框增加可输入文本

原理:

  将下拉框用一个input盖住,再将select的值改入input内。

代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        #Layer1{position:relative;width:161px;   height:40px;   z-index:0;}
        #Layer1>select{position:absolute;width:182px  height:14px;   z-index:2;}
        #Layer1>input{position:absolute; width:159px; height:14px; z-index:3;}
    </style>
</head>
<body>
<form>

    <div   id="Layer1" >
        <select   name="select"  onchange="txtID.value=this[selectedIndex].text">
            <option>111111</option>
            <option>22222222</option>
            <option>3333333</option>
            <option>4444</option>
        </select>
        <input type="text" name="txtID"  size="8"   value=""   maxlength=8>
    </div>

</form>
</body>
</html>
原文地址:https://www.cnblogs.com/s313139232/p/7381425.html