玩转CSS：用ul li +JS 模拟select，避坑浏览器不兼容。

玩转CSS：用ul li +JS 模拟select，避坑浏览器不兼容。

在前端的工作中，经常会遇到 selcet控件，但我们用css来写它的样式时候，总是不那么令人满意，各种浏览器不兼容啊有没有？

那么，我本篇文章就给大家提供一个思路：用UL 和li 模拟 select 控件，让我们用起来可以避免令人心烦的调整样式问题。好了，接下来，我们看图：

本例图片

文档结构

<div class="model-select-box"><div id="model-select-text" class="model-select-text" value="" class="">请选择</div><b class="bg1"></b><ul class="model-select-option"><li data-option="red" class="red">红色</li><li data-option="orange" class="orange">橙色</li><li data-option="yellow" class="yellow">黄色</li><li data-option="green" class="green">绿色</li><li data-option="cyan" class="cyan">青色</li><li data-option="blue" class="blue">蓝色</li><li data-option="purple" class="purple">紫色</li></ul></div>

CSS样式

*{margin:0;padding: 0;
}ul {list-style: none;}.model-select-box {  float: left;width: auto;min-width: 90px;height: auto;  line-height: 22px;margin-right: 10px;  position: relative;font-size: 0.8rem;box-sizing: border-box; z-index: 99;transform: translateY(-5px);user-select: none;background: #ccc;border-radius: 5px;
}.model-select-box:hover .model-select-option{  display: block;
}.model-select-option {display: none;position: absolute;background: #fff;width: calc(100% - 2px);top:28px;  border-radius: 0 0 5px 5px;  border: 1px solid #ccc;
}.model-select-option li {padding: 4px 10px;  text-align: center;   
}
.model-select-option li a{ color: #666;display: block;width: 100%;height: 30px;line-height: 30px;}.model-select-option li+li{border-top:1px solid #ccc;
}.model-select-option li:hover{color: #000;font-weight: 700;}/* 小三角 */
.bg1{position: absolute;top:12px;right:10px;border-width: 6px;border-style: solid;border-color: #666 transparent transparent transparent;  
}
.model-select-text{display: block;padding: 4px 10px;  padding-right: 20px;
}.red,
.orange,
.yellow,
.green,
.cyan,
.blue,
.purple{display: block;padding: 4px 10px;  padding-right: 20px;cursor: pointer; color: #666;   
}
.model-select-text{color: #666;
}.red{  background: red;  }
.orange{ background:orange;  }
.yellow{ background:yellow;  }
.green{ background:green;  }
.cyan{ background:cyan;  }
.blue{ background:blue;   }
.purple{ background:purple;  }

在这里，我们预先隐层了UL，然后使用hover 显示了隐藏起来的ul。原理很简单，大家分析一下上面CSS样式表即可。

JQ代码

接下来，我们就要实现li 点击后，将li设置为选中状态，并且，将 被选中的li的value传递给 目标div。这里，必然需要用到js。那么，我们看代码：

/** 模拟网页中所有的下拉列表select*/function selectModel() {var $box = $('div.model-select-box');var $option = $('ul.model-select-option', $box);var $txt = $('div.model-select-text', $box);var speed = 10;var $bg = $('b.bg1',$box)// 点击小三角$bg.click(function(){$option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function () {});$(this).siblings('ul.model-select-option').slideToggle(speed, function () {// int($(this));});return false;})/** 单击某个下拉列表时，显示当前下拉列表的下拉列表框* 并隐藏页面中其他下拉列表*/$txt.click(function (e) {$option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function () {});$(this).siblings('ul.model-select-option').slideToggle(speed, function () {// int($(this));});return false;});//点击选择，关闭其他下拉/** 为每个下拉列表框中的选项设置默认选中标识 data-selected* 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected* 为选项添加 mouseover 事件*/$option.find('li').each(function(index,element){// console.log($(this) + '1');if($(this).hasClass('selected')){$(this).parent('.model-select-option').siblings('.model-select-text').text($(this).text())}$(this).mousedown(function(){$(this).parent().siblings('#model-select-text').text($(this).text()).attr('class', $(this).attr('data-option'));$option.slideUp(speed, function () {});$(this).addClass('selected').siblings('li').removeClass('selected');return false;})$(this).on('mouseover',function(){$(this).addClass('selected').siblings('li').removeClass('selected');})})//点击文档，隐藏所有下拉$(document).click(function (e) {$option.slideUp(speed, function () {});});      }selectModel();})

还有，别忘了引用 JQ库

<script src="jquery-3.6.3.min.js"></script>

大功告成

好了，至此，这个用ul li模拟select的功能代码就算完成了，具体表现可以通过修改样式表来实现。

看完了的同学，请帮忙点赞+关注+评论！谢谢！

完整代码下载点这里