HTML实现可编辑下拉框

最新推荐文章于 2024-05-03 11:17:45 发布

idomyway

最新推荐文章于 2024-05-03 11:17:45 发布

阅读量2.1w

点赞数 4

分类专栏： HTML 文章标签： html select input 可编辑下拉框

本文链接：https://blog.csdn.net/idomyway/article/details/79078547

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

在HTML中下拉框是不能进行编辑的，我们可通过Select下拉框和input实现commbox功能
思想：

通过绝对定位实现input覆盖Select
通过change事件实现数据的单向绑定

效果图

这里写图片描述

代码

<html>  
    <head>  
        <title>可编辑下拉框</title>  
        <meta charset="UTF-8" />  
        <style type="text/css">  
        /*input css*/  
        .iInput{  
            position: absolute;  
            width: 99px;  
            height: 16px;  
            left: 1px;  
            top: 2px;  
            border-bottom: 0px;  
            border-right: 0px;  
            border-left: 0px;  
            border-top: 0px;  
        }  
        </style>  
    </head>  
    <body>  
        <div style="position:relative;">  
              <select style="width:120px;"   
                      onchange="document.getElementById('input').value=this.value">  
                <option value="2017">2017</option>  
                <option value="2016">2016</option>  
                <option value="2015">2015</option>  
                <option value="2014">2014</option>  
              </select>  
              <input id="input" name="input" class="iInput">  
        </div>  
    </body>  
</html>

idomyway

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
HTML实现可编辑下拉框

前言在HTML中下拉框是不能进行编辑的，我们可通过Select下拉框和input实现commbox功能思想：通过绝对定位实现input覆盖Select通过change事件实现数据的单向绑定效果图代码<html> <head> <title>可编辑下拉框</title> <meta charset="UTF-8" />
复制链接

扫一扫