由于 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. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  2. HttpClient 源码阅读

    在项目中常用的HttpClient,与我们非常的亲密,为了能处理遇到的Http问题,我们应该去了解里面的机制和实现. 官方文档:http://hc.apache.org/httpcomponents- ...

  3. shell脚本获取传递的参数

    1 脚本编写 #!/bin/bash 2 解释 $n 表示是第几个参数 $0 表示脚本命令本身 3 执行效果

  4. django-spirt 论坛主题

    官方文档 新建项目 django_sprit 文件夹 cd django_sprit pip install django-spirit spirit startproject mysite cd m ...

  5. 8.JVM技术_JVM参数列表

    1.JVM参数列表 通常情况下启动一个Java应用程序就会启动JVM的虚拟机,虚拟机在启动时可以通过java 指令传递参数给JVM. java -Xmx3550m -Xms3550m -Xmn2g - ...

  6. ble ic

    ti cc25xxnordic nrf24xx nrf51xx nrf52xx Beken bk34xx

  7. Django：新手入门学习资料汇总

    (1)作者(刘江)(神都公务员出身,军工专家,文章详尽全面):http://www.liujiangblog.com/course/django/2 (2)魔力Python:作者(小楼一夜听春语)(文 ...

  8. main方法类 为何由AppClassLoader加载

    AppClassLoader AppClassLoader应用类加载器,又称系统类加载器,负责在JVM启动时加载来自命令java中的classpath或者java.class.path系统属性或者CL ...

  9. mysql 命令行导出导入数据

    导出数据库(sql脚本)  mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u root -p --databases db_name > test ...

  10. Html中使用Cookie取值赋值

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