下拉框可选可输入

网站中经常会有模块的下拉框为了方便用户和网站的页面友好需要下拉框按钮既可以下拉选择已经有的属性,又需用户可以自己输入自己需要的数值,这一般会出现电商网站选择产品数量上。

如图所示:

代码如下:需要拿走不用谢

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>可填可选的下拉框</title>
        <style type="text/css">
            .box
            {
             width:  100px;
             height: 21px;
             clip: rect( 0px, 181px, 20px, 0px );
             overflow: hidden;
            }
            .selectTT
            {
             position: absolute;
             left: -1px;
             top: -1px;
             width: 100px;
             height: 27px;
             z-index: 1;
             cursor: pointer;
            }
            .inputTT {            
             position: absolute;
             z-index: 5;
             height: 21px;
             width: 76px;
             left: -1px;
             top: -1px;
            }
        </style>
    </head>

    <body>
        <div class=box id="afd">
            <select name="yjjx" id="yjjx" class="selectTT" onChange="document.getElementById('sbtlInp222').value=this.options[this.selectedIndex].text">
                <option value="" selected>全部</option>
                <option value="SK55-C">SK55-C</option>
                <option value="SK55SR-3">SK55SR-3</option>
                <option value="SK60-C">SK60-C</option>
            
            </select>
            <input name="mytext" type="text" class="inputTT" id="sbtlInp222" value="0" size="10">
        </div>

    </body>

</html>
人还是要有梦想的,万一实现了呢!
原文地址:https://www.cnblogs.com/nannan1221/p/7880069.html