HTML可编辑下拉框的实现

来源：互联网发布：马士兵网上商城源码编辑：程序博客网时间：2024/04/29 16:11

方法一：用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中的值即可。

1 0