由于 select 没有选中事件（onchange 事件在内容改变时才会触发，选择同一个条目不会触发），只好用其他控件来实现。

<!doctype html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Select</title>

    <style>

        .select-container {

            position: relative;

        }

        .select-container input {

            width: 240px;

            height: 24px;

            margin-top: 15px;

            line-height: 24px;

            text-indent: 5px;

        }

        .select-container span {

            /* 定位至 input 尾部 */

            position: absolute;

            top: 20px;

            left: 220px;

            /* 屏蔽点击事件 */

            pointer-events: none;

        }

        .select-container ul {

            /* 定位至 input 下面 */

            position: absolute;

            top: 28px;

            left: 0px;

            padding: 0;

            /* 显示在 input 上面 */

            z-index: 1;

            width: 242px;

            /* 默认隐藏 */

            display: none;

            list-style: none;

            /* 边框 */

            border: 1px solid #007ACC;

        }

        .select-container li a {

            /* 使背景色占满一行 */

            display: inline-block;

            width: 100%;

            color: #000000;

            text-indent: 5px;

            /* 默认背景色 */

            background: #fff;

            /* 去掉下划线 */

            text-decoration: none;

        }

        .select-container li a:hover {

            color: #fff;

            background: #1F92E4;

        }

    </style>

</head>

<body>

    <div class="select-container">

        <span>▼</span>

        <input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';"

            onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" />

        <ul>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="http://www.baidu.com" target="_blank">测试1</a>

            </li>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="javascript:;">测试2</a>

            </li>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="javascript:;">测试3</a>

            </li>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="javascript:;">测试4</a>

            </li>

        </ul>

    </div>

    <div class="select-container">

        <span>▼</span>

        <input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';"

            onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" />

        <ul>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="http://www.baidu.com" target="_blank">测试1</a>

            </li>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="javascript:;">测试2</a>

            </li>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="javascript:;">测试3</a>

            </li>

            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">

                <a href="javascript:;">测试4</a>

            </li>

        </ul>

    </div>

</body>

<script>

    window.onload = function () {

        var list = document.getElementsByClassName('select-container');

        for (var i = 0; i < list.length; i++) {

            list[i].children[1].value = list[i].children[2].children[0].innerText.trim();

        }

    }

</script>

</html>

效果

http://www.w3school.com.cn/tiy/t.asp

https://www.cnblogs.com/ooo0/p/6278102.html

ul 加 li 实现 select 下拉选功能的更多相关文章

  1. 用div，ul，input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. JQuery实现的 checkbox 全选；<select>下拉框功能

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

  3. select下拉选框的默认值，包括每次进入页面的默认值

    下拉选: <select onchange="selectTotal(this.value)" style="width: 50px;">      ...

  4. 【java+selenium3】select 下拉选 (八)

    一.select 下拉框 1.下拉选的处理类:Select 如果页面元素是一个下拉框,我们可以将此web元素封装成Select对象. Select select = new Select(WebEle ...

  5. ul -- li 模拟select下拉框

    在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...

  6. jquery获取当前select下拉选的属性值

    body中: <li> <select id="select_phone"></select> <input type="but ...

  7. 修改select下拉选的默认选中值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. DOM操作表单（select下拉选框）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. iview 表单验证 input 用失去焦点事件 blur， select下拉选框 要用change事件 验证

    birthday: [{ required: true, message: '内容不能为空', trigger: 'blur' }],belongDept: [{ required: true, me ...

随机推荐

  1. 《python解释器源码剖析》第7章--python中的set对象

    7.0 序 集合和字典一样,都是性能非常高效的数据结构,性能高效的原因就在于底层使用了哈希表.因此集合和字典的原理本质上是一样的,都是把值映射成索引,通过索引去查找. 7.1 PySetObject ...

  2. python常用模块：sys、os、path、setting、random、shutil

    今日内容讲了3个常用模块 一.sys模块二.os模块三.os下path模块四.random模块五.shutil模块 一.sys模块 import sys #环境变量 print(sys.path) # ...

  3. 4.Nginx配置文件Nginx.conf_虚拟主机配置规则

    1.Nginx配置文件及各个配置项含义 #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全 ...

  4. Jmeter （四） 关联

    关联: 实例:关联登录请求的 session,方便下次自动登录( 自我理解) 关联用户session 关联 例如 京东秒杀 1000个用户 同时秒杀 怎么模拟??  使用关联啊! 一.正则表达式提取器 ...

  5. Arduino短学期作业展示

    自己挖的坑终于填上了,真是欣慰啊= = 源代码:https://github.com/Miyeah/Arduino-Dormitory-Assistant Arduino-Dormitory-Assi ...

  6. 网络协议相关面试问题-DNS相关面试问题

    对于网络上的大部通讯都是基于TCP/IP协议的, 其中最重要的是IP协议,它是基于IP地址的,而计算机通讯只能识别IP地址,如192.168.0.1,而不能识别像咱们在浏览器敲得见名之义的" ...

  7. 转PostgreSQL 用游标优化的一个例子

    一位PG社区的朋友提到的一个应用场景,目前遇到性能问题. 数据结构大概是这样的,包含一个主键,一个数组,一个时间,其他字段. 请求分析: 有检索需求,比较频繁.查找数组中包含某些元素的记录,并按时间排 ...

  8. Python：面向对象编程2

    types.MethodType __slot__ @property,  @xxx.setter Python的多重继承和MinIn 如何在class创建后,给实例绑定属性和方法? (动态绑定/定义 ...

  9. li每三个换行

      背景:鉴于有时候调取数据用table不方便,所以用的li,但是li又没有table的样式,就需要自己写了 思路:先将所有的li浮动,然后清除第3n+1的浮动(如果是四个则是4n+1) 例子: &l ...

  10. Html中使用Cookie取值赋值

    //设置Cookie function setCookie(name, value) { var Days = 1; var exp = new Date(); exp.setTime(exp.get ...