Js模拟下拉框（select-option）的实现

左手喵子

已于 2025-02-23 18:30:51 修改

阅读量555

点赞数 5

分类专栏： # JavaScript开发文章标签： javascript 开发语言 ecmascript

于 2024-02-09 17:33:18 首次发布

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136087448

版权

JavaScript开发专栏收录该内容

43 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 200px;height: 40px;line-height: 40px;text-indent: 5px;margin: 0 auto;}
 
        .box span{display: block;border: solid 1px black;}
 
        .list{margin: 0;padding: 0;list-style: none;background: #efefef;border: solid 1px black;border-top:0;display: none;}
        .list li{line-height: 40px;text-indent: 20px;}
        .list li.active{background: #66f;color: #fff;}
    </style>
</head>
<body>
    <div class="box">
        <span class="title">北京</span>
        <ul class="list">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>杭州</li>
        </ul>
    </div>
    <select name="" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
    </select>
</body>
<!-- <script src="../public.js"></script> -->
<script>
    var ospan = document.querySelector(".title");
    var olist = document.querySelector(".list");
    var ali = olist.children;
 
    // 3.提前准备一个状态变量：1显示,2隐藏，默认为1显示
    var type = 1;
 
    // 9.默认项的索引
    var index = 3;
    setActive();
    ospan.innerHTML = ali[index].innerHTML;
 
    // 设置当前项
    function setActive(){
        // 先取消所有
        for(var i=0;i<ali.length;i++){
            ali[i].className = "";
        }
        // 给当前li加上
        ali[index].className = "active";
    }
	//封装的解决事件冒泡的兼容处理
	function stopBubble(e){
		if(e.stopPropagation){
		        e.stopPropagation();
		    }else{
		        e.cancelBubble = true;
		    }
		}

    
    // 1.点击内容区域显示
    ospan.onclick = function(eve){
		console.log("1111111")
        var e = eve || window.event;
        stopBubble(e);
        // 4.根据状态决定显示，或隐藏，同时修改状态
        if(type === 1){
            olist.style.display = "block";
            // 12.每次显示下拉菜单，都渲染一次默认值
            setActive();
            type = 2;
        }else{
            olist.style.display = "none";
            type = 1;
        }
    }
    // 2.点击空白隐藏
    document.onclick = function(){
        olist.style.display = "none";
        type = 1;
    }
 
    // 5.遍历li
    for(var i=0;i<ali.length;i++){
        // 10.给每个li绑定索引，起个名叫abc
        ali[i].abc = i;
 
        // 6.鼠标进入li
        ali[i].onmouseover = function(){
            index = this.abc;
            setActive();
        }
        // 7.鼠标离开li
        ali[i].onmouseout = function(){
            // 取消当前li的样式
            this.className = "";
        }
        // 8.鼠标点击li
        ali[i].onclick = function(){
            // 将span的内容设置成li的内容
            ospan.innerHTML = this.innerHTML;
            // 11.点击li后，将默认索引改成点击的索引
            index = this.abc;
        }
    }
 
 
 
</script>
</html>