• 下拉框可选可输入


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

    如图所示:

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

    <!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>
    人还是要有梦想的,万一实现了呢!
  • 相关阅读:
    关于__attribute__[转]
    Boost Posix Time
    c++ explicit构造函数[转]
    C++11 多线程:数据保护[转]
    C++ int,char,string,CString类型转换(整理总结)
    C和C++如何来编写时间的程序[转]
    设置CentOS防火墙开放端口
    SSH框架
    20060518: Alert!
    yum命令时出现Error: xz compression not available问题。
  • 原文地址:https://www.cnblogs.com/nannan1221/p/7880069.html
Copyright © 2020-2023  润新知