由于 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之file 方法

    file 对象使用 open 函数来创建,下表列出了 file 对象常用的函数: 1    file.close() close() 方法用于关闭一个已打开的文件.关闭后的文件不能再进行读写操作, 否 ...

  2. payload免杀之Installutil.exe&csc.exe利用

    0x00 前言 C#的在Windows平台下的编译器名称是Csc.exe.Installutil.exe工具是一个命令行实用程序,允许您通过执行指定程序集中的安装程序组件来安装和卸载服务器资源,可以执 ...

  3. web端文件上传，预览，下载，删除

      //HTML部分 <div class="item attachment attachmentNew"> <span class="name&quo ...

  4. JavaWeb【二、Tomcat安装】

    简版: 下载安装 http://tomcat.apache.org/download-80.cgi 环境变量 CATALINA_HOME-tomcat安装路径-[E:\apache-tomcat-8. ...

  5. python eval内置函数作用

    功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法: eval(source[, globals[, locals]]) -> value 参数: source:一个Python表 ...

  6. js对象的所有方法

    Object构造方法 Object.assign() 将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象. Object.create() 用指定的原型对象和属性创建一个新对象. Object ...

  7. 记一次自启动的docker容器将宿主机的开机用户登录界面覆盖事件

    宿主机的系统为CentOS7_7.7.1908,默认为GUI启动,安装了宝塔面板,docker-ce为最新版. 在启动了一个centos7的容器(镜像为centos官方镜像)后,将该容器重启策略设置为 ...

  8. 2019-2020-1 20199319《Linux内核原理与分析》第一周作业

    一.Linux系统简介 通过实验一了解了Linux 的历史,Linux与windows之间的区别以及学习Linux的方法.因为一直用的都是windows系统,习惯了图形界面,而Linux是通过输入命令 ...

  9. Mac下 CMD常用命令

    1.常用命令 pwd     当前工作目录 cd(不加参数) 进root cd(folder)      进入文件夹 cd ..     上级目录 cd ~     返回root cd -     返 ...

  10. HDU-3746-Cyclic nacklace(KMP, 循环节)

    链接: https://vjudge.net/problem/HDU-3746 题意: 第一题来啦. 现在给你一个字符串,请问在该字符串末尾最少添加多少个字符,可以让这个字符串获得重复循环序列. 思路 ...