由于 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项目使用openlayers来添加地图标注，标注样式设置的简要模板

    先把代码贴出来,注释以后有时间再写(需要留意一下这里图标的引入方式,函数内相同路径无法找到图片) import sk from "../../assets/img/home/sk-activ ...

  2. 1-10000以内的完数（js）

    //1-10000以内的完数 //完数:因子之和相加等于这个数 //例如:6的因子为1,2,3:1+2+3=6 // 6 // 28 // 496 // 8128 let sum = 0, i, j; ...

  3. Windows 7上QTP11破解及java等插件破解方法

    QTP11破解方法: 1.准备文件 注册机mgn-mqt82.exe 2.安装QTP11 3.运行注册机mgn-mqt82.exe 如果运行mgn-mqt82.exe 没有反应-,请注意关掉暂时关掉杀 ...

  4. 《设计模式之美》 <01>为什么需要学习掌握设计模式?

    1. 应对面试中的设计模式相关问 题学习设计模式和算法一样,最功利.最直接的目的,可能就是应对面试了.不管你是前端工程师.后端工程师,还是全栈工程师,在求职面试中,设计模式问题是被问得频率比较高的一类 ...

  5. Jmeter （一） 安装

    https://blog.csdn.net/ls1792304830/article/details/52718177 一.准备工具 1.Windows 操作系统 2.jmeter 3.JDk 依赖环 ...

  6. 一个javascript面试题

    javascript面试题代码: <script type="text/javascript"> function fun(x,y){ console.log(&quo ...

  7. 云原生相关名词Istio发音

    服务网格词汇 Istio,希腊语言中大概是风帆的意思, 发音  [iːst'iəʊ] ,相当于中文的 伊斯特亿欧

  8. WPF界面开发技巧大放送！DevExpress WPF在TreeListView中扩展N级

    DevExpress广泛应用于ECM企业内容管理. 成本管控.进程监督.生产调度,在企业/政务信息化管理中占据一席重要之地.通过DevExpress WPF Controls,您能创建有着强大互动功能 ...

  9. php类知识---trait特性

    #由于php类只支持单一继承,但我们又需要使用一些类的优秀特性,因此有了trait <?php trait cpc #trait 下的方法只能用public { function trainni ...

  10. Blade 模板

    在Laravel 5.3中,@foreach指令提供了更加强大的功能,在每一个@foreach循环体中都可以调用一个新的$loop变量.该变量是一个stdClass实例,包含了当前循环的元数据信息,让 ...