zoukankan      html  css  js  c++  java
  • Html可以输入的下拉框设计

    实现:设计出一个可以手动输入也可以下拉选择的控件。

    思路:

      在下拉控件的上方放置一个文本框,但是width要注意(显示出下拉按钮),所以下拉框和文本框的position属性都是absolute,下拉框选择ongchange事件,把选中的下拉项的值赋值给文本框,这时这个文本框既可以输入也可以被下拉选择(取下拉框的值)最终取文本框中的值。

        <table cellspacing="0" cellpadding="0" width="100%" border="0">
            <tr>
                <td align="left">
                    <!--select标签和input外面的span标签的格式是为了使两个位置在同一位置,控制位置-->
                    <span style="position: absolute; border: 1pt solid #c1c1c1; overflow: hidden;  188px;
                        height: 19px; clip: rect(-1px 190px 190px 170px);">
                        <select name="aabb" id="aabb" style=" 190px; height: 20px; margin: -2px;" onchange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
                            <!--下面的option的样式是为了使字体为灰色,只是视觉问题,看起来像是注释一样-->
                            <option value="" style="color: #c2c2c2;">---请选择---</option>
                            <option value="闲人书库">闲人书库</option>
                            <option value="闲人BLOG">闲人BLOG</option>
                            <option value="闲人设计">闲人设计</option>
                            <option value="闲人软件">闲人软件</option>
                        </select>
                    </span><span style="position: absolute; border-top: 1pt solid #c1c1c1; border-left: 1pt solid #c1c1c1;
                        border-bottom: 1pt solid #c1c1c1;  170px; height: 19px;">
                        <input type="text" name="ccdd" id="ccdd" value="输入或选择" style=" 170px;
                            height: 19px; border: 0pt;"/>
                    </span>
                </td>
            </tr>
        </table>
  • 相关阅读:
    powerdesigner 字段添加注释和默认值
    springboot集成enchance
    判断字段数据什么数据类型
    springboot打成jar包涉及到的linux命令
    springdatajpa添加完modle之后立即返回id
    阿里云上部署环境
    STS 启动之后, "Initializing Java Tooling" 一直卡住问题解决
    C#访问MongoDB数据
    MongoDB开发学习(1)开天辟地,经典入门
    Step by Step 設定 TFS 2012 Create Team Project 權限
  • 原文地址:https://www.cnblogs.com/Med1tator/p/6721190.html
Copyright © 2011-2022 走看看