HTML可编辑下拉框的实现

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

Cike9588

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

阅读量5.2k

点赞数 2

分类专栏：前端web 文章标签： html

本文链接：https://blog.csdn.net/qq_35952946/article/details/54407770

版权

前端web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

方法一：用H5

    <!-- HTML5 <datalist> 元素 -->
    <input list="list" id="li"/>
    <datalist id="list">
        <option value="111"></option>
        <option value="222"></option>
        <option value="333"></option>
        <option value="444"></option>
        <option value="555"></option>
    </datalist>
    <input type="button" value="获取值" onclick="pu1()">

<script type="text/javascript">
    //获取datalist下拉框中的值。      
    function pu1() {
        var a = document.getElementById("li").value;
        alert(a);
    }
</script>

方法二：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/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>
<script type="text/javascript">
function aa() {
    var a = document.getElementById("input").value;
    alert(a);
}
</script>
<title>Insert title here</title>
</head>
<body>
<div style="position:relative;">  
              <select style="width:120px;" onchange="document.getElementById('input').value=this.value">  
                <option value="A类">A类</option>  
                <option value="B类">B类</option>  
                <option value="C类">C类</option>  
                <option value="D类">D类</option>  
              </select>  
              <input id="input" name="input" class="iInput">  

              <input type="button" value="提取值" onclick="aa()">
        </div> 
</body>

理解：1、一个select和一个input重合在一起。
2、select每触发一次onchange就把获取到的值存进input中
3、最后直接获取input中的值即可。

Cike9588

关注

2
点赞
踩
5

收藏

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

直接上代码：<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css"> .iInput{ position: absolute; width: 99px;
复制链接

扫一扫