div模拟select选择框的示例代码分享

来源：懂视网责编：小采时间：2020-11-27 18:50:08

div模拟select选择框的示例代码分享

div模拟select选择框的示例代码分享:不太擅长总结挺早的东西了，突然觉得都记录下来，小demo也比较简单，欢迎讨论指正。之前 ui的设计稿选择框不想要默认样式，默认样式改起来也是太心塞，有的还改不了，所以干脆自己写了一个p模拟的选择框先看效果吧：代码实现不多，也都很简单，js部分是纯原

推荐度：

点击下载本文 文档为doc格式

导读div模拟select选择框的示例代码分享:不太擅长总结挺早的东西了，突然觉得都记录下来，小demo也比较简单，欢迎讨论指正。之前 ui的设计稿选择框不想要默认样式，默认样式改起来也是太心塞，有的还改不了，所以干脆自己写了一个p模拟的选择框先看效果吧：代码实现不多，也都很简单，js部分是纯原

不太擅长总结挺早的东西了，突然觉得都记录下来，小demo也比较简单，欢迎讨论指正。

之前 ui的设计稿选择框不想要默认样式，默认样式改起来也是太心塞，有的还改不了，所以干脆自己写了一个p模拟的选择框先看效果吧：

代码实现不多，也都很简单，js部分是纯原声的所以不需要引用其他框架就可以用：

先HTML部分：

<!DOCTYPE html><html>

 <head>
 <meta charset="UTF-8">
 <title>p模拟select选择框</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <link href="css/customSelect.css" rel="stylesheet" />
 
 </head>

 <body>
 
 <p class="custom-select-box">
 <p class="select-box mui-inline" style="width: 220px;">
 <span id="fisrt" data-show="0">1</span>
 <ul class="custom-option-box">
 <li class="active"><span>1</span></li>
 <li><span>2</span></li>
 <li><span>3</span></li>
 <li><span>4</span></li>
 </ul>
 </p>
 
 </p>
 
 
 <script src="js/customSelect.js"></script>
 
 
 </body></html>

css部分：

ul,li,p,span{
 box-sizing: border-box;
}.select-box ul,
.select-box li {
 list-style-type: none;
 margin: 0;
 padding: 0;
 cursor: pointer;
 background: #fff;
}.select-box {
 width: 100%;
 position: relative;
 background: #fff;
}#fisrt {
 display: block;
 line-height: 40px;
 width: 100%;
 height: 40px;
 padding: 0 15px;
 padding-right: 20px;
 border: 1px solid #ccc;
 border-radius: 3px; /*white-space: nowrap;*/
 overflow: hidden;
 cursor: pointer;
}#fisrt.active {
 border: 1px solid #F2C051;
}#fisrt::after {
 content: "";
 display: block;
 position: absolute;
 top: 18px;
 right: 10px;
 width: 0;
 height: 0;
 border: 5px solid transparent;
 border-top-color: #000;
 background: #fff;
}.custom-option-box {
 display: none;
 position: absolute;
 left: 0;
 top: 40px;
 background: #fff;
 border: 1px solid #ccc;
 border-top-color: transparent;
 z-index: 10000;
}.custom-option-box li {
 display: block;
 line-height: 30px;
 padding: 0 15px;
 z-index: 10000;
}.custom-option-box li:hover, 
.custom-option-box li.active {
 background: #F2C051;
}.custom-option-box span {
 cursor: pointer;
}

js部分：（js部分有一点粗糙，现放上来，这两天会修改一下）

(function() {
 ready(function() { 
 var option_box = document.getElementsByClassName("custom-option-box")[0],
 select_box = document.getElementsByClassName("select-box")[0],
 width;
 option_box.style.display = "none"; //初始ul隐藏 
 width = select_box.offsetWidth; //select的宽度 默认 100% 
 option_box.style.width = width + "px"; //初始ul宽度 
 document.getElementById("fisrt").addEventListener("click", function() { 
 var isShow = this.dataset.show; 
 if(isShow == 0) { 
 this.dataset.show = 1; 
 this.classList.add("active"); 
 this.nextElementSibling.style.display = "block"; //找到ul.son_ul显示 
 } else { 
 this.dataset.show = 0; 
 this.classList.remove("active"); 
 this.nextElementSibling.style.display = "none"; //找到ul.son_ul显示 
 }
 },false); 
 var option = option_box.getElementsByTagName("li"); 
 for(var i = 0; i < option.length; i++){ 
 option[i].onclick = function(){ 
 var fisrt = this.parentNode.previousElementSibling; 
 var siblings = getSiblings(this);
 fisrt.innerHTML = this.childNodes[0].innerText;
 fisrt.dataset.val = this.dataset.val; 
 this.classList.add("active"); 
 for(var i = 0;i<siblings.length;i++){
 siblings[i].classList.remove("active");
 } this.parentNode.style.display = "none";
 fisrt.dataset.show = 0;
 fisrt.classList.remove("active");
 } 
 } 
 
 }); 
 function ready (fn) { 
 if(document.addEventListener){ //标准浏览器
 document.addEventListener('DOMContentLoaded',function(){ //注销时间，避免重复触发
 document.removeEventListener('DOMContentLoaded',arguments.callee,false);
 fn(); 
 //运行函数
 },false);
 }else if(document.attachEvent){ //IE浏览器
 document.attachEvent('onreadystatechange',function(){ 
 if(document.readyState=='complete'){
 document.detachEvent('onreadystatechange',arguments.callee);
 fn(); 
 //函数运行 
 }
 });
 }
 } 
 function getSiblings (elm) { 
 var a = []; 
 var p = elm.parentNode.children; 
 for(var i = 0, pl = p.length; i < pl; i++) { 
 if(p[i] !== elm) a.push(p[i]);
 } 
 return a;
 }
})();

div模拟select选择框的示例代码分享

推荐度：

点击下载本文 文档为doc格式

标签：代码下拉 div

热门焦点

div模拟select选择框的示例代码分享

div模拟select选择框的示例代码分享

div模拟select选择框的示例代码分享

最新推荐

猜你喜欢

热门推荐