玩转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的功能代码就算完成了，具体表现可以通过修改样式表来实现。
看完了的同学，请帮忙点赞+关注+评论！谢谢！
完整代码下载点这里