Html5下拉控件同时支持文本输入和下拉代码

简介: 有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下:DOCTYPE html> 请选择.

有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下:

<!DOCTYPE html>
<html>
    <head>    
        <title></title>    
    </head>
    <body>
        <div style="position:relative;"> 
            <span style="margin-left:105px;overflow:hidden;"> 
            <select style="width:118px;margin-left:-100px;height:21px;" onchange="this.parentNode.nextSibling.value=this.options[this.selectedIndex].text;"> 
                <option value="-1">请选择...</option> 
                <option value="1">选项一</option> 
                <option value="2">选项二</option> 
                <option value="3">选项三</option> 
            </select>
            </span>
            <input type="text" style="width:100px;position:absolute;left:0px;" value="请选择..."> 
        </div>
    </body>
</html>

 

目录
相关文章
|
29天前
|
前端开发 开发者 容器
|
1月前
|
前端开发
html空格代码怎么写
HTML中的空格可以通过多种方式实现,这取决于你想要在页面上显示的空格类型。以下是一些常用的方法来在HTML中创建空格
|
3月前
|
JavaScript
用什么代码可以在页面添加html元素呢?
用什么代码可以在页面添加html元素呢?
|
10天前
|
前端开发 JavaScript
HTML深度解析:更改文本颜色
【4月更文挑战第1天】
29 0
HTML深度解析:更改文本颜色
|
21天前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
13 1
|
25天前
当当网首页——html代码
当当网首页——html代码
8 1
|
26天前
网状的隧道穿梭特效HTML代码
网状的隧道穿梭特效HTML代码,效果是动态的,可以下载源码,自己在本地运行
12 0
网状的隧道穿梭特效HTML代码
|
1月前
自适应窗口图片轮播HTML代码
自适应窗口图片轮播HTML代码
18 2
自适应窗口图片轮播HTML代码
|
1月前
|
前端开发 容器
html居中代码怎么写
在HTML和CSS中,居中元素是一个常见的布局需求。无论是文本、图片还是整个容器,居中都可以使页面看起来更加整洁和对称。以下是几种常用的HTML居中方法及其代码示例。
|
1月前
HTML文本内容标签
HTML文本内容标签