下拉框可选择可输入

最新推荐文章于 2024-07-15 14:59:04 发布

天之涯_海之角

最新推荐文章于 2024-07-15 14:59:04 发布

阅读量242

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/wangyanhong88/article/details/84512307

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

写道

主要是在原select上覆盖div，当选择数据的时候，把div中的input赋值

 



<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
    <title>可输入的下拉框</title>
</head>
<body>
    <form action="" name="myform">
    <div style="position: relative;">
        <span style="margin-left: 100px; width: 18px; overflow: hidden;">
            <select style="width: 118px; margin-left: -100px" οnchange="this.parentNode.nextSibling.value=this.value">
                <!--此处为学习积累，在注释中，没有实际作用
      this: <select>
      this.parentNode: <select> 的父节点即 <span>
      this.parentNode.nextSibling: <select> 的父节点即 <span> 的兄弟节点 <INPUT>
 
     alert(this.parentNode.tagName)
      alert(this.parentNode.nextSibling.tagName)
     -->
                <option value="option1">option1 </option>
                <option value="option2">option2 </option>
                <option value="option3">option3 </option>
            </select>
        </span>
        <input name="box" style="width: 100px; position: absolute; left: 0px;">
    </div>
    </br>
    <input type="button" name="submit" value="OK" οnclick="alert(myform.box.value)" style="width: 100px;">
    </form>
</body>
</html>