由于 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. TVM使用问题记录

    1.numpy提示repeat错误 错误信息为 One method of fixing this is to repeatedly uninstall numpy until none is fou ...

  2. vue 节流

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. centos7andcentos6初始化脚本

    #!/bin/bash # get OS verison RELEASEVER=$(rpm -q --qf "%{Version}" $(rpm -q --whatprovides ...

  4. Linux学习--第九天--du、df、fsck、dumpe2fs、mount、NTFS-3G、fdisk、partprobe、/etc/fstab、free、mkswap、swapon

    分区类型 主分区:最多只能分四个 扩展分区:只能有一个,如果有了扩展分区,主分区只能有三个.扩展分区不能格式化和存储数据,再划分为逻辑分区才能进行相应操作. 逻辑分区:IDE硬盘,linux最多支持5 ...

  5. python函数：函数使用原则、定义与调用形式

    一.函数初始 二.函数的使用原则 三.函数的定义与调用形式 四.函数的返回值 五.函数参数的使用 一.函数初始 # 须知一: # 硬盘空间无法修改,硬盘中的数据更新都是用新的内容覆盖旧的内容 # 内存 ...

  6. Zabbix 监控Windows磁盘IO

    Windows下,打开cmd输入 typeperf -qx > c:\typeperf.txt #打开c:\typeperf.txt文件 windows性能计数器里面包含windows相关数值 ...

  7. LeetCode3.无重复字符的最大子串

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc&quo ...

  8. Spring事务源码分析

    首先看例子,这例子摘抄自开涛的跟我学spring3. @Test public void testPlatformTransactionManager() { DefaultTransactionDe ...

  9. java 使用poi读取word文档存入数据库

    使用的poi jar包需要自己下载 读取的word文档中含有多个图片,所以分为两个部分,一个部分读取各个表格中内容,一个是将所有图片截取出来: /** * 遍历段落内容 * docxReadPath ...

  10. 返回vector指针

    #include<iostream> #include <vector> using namespace std; vector<int> *MyFind() { ...