Sample code sharing for div simulation Select selection box

Not too good at summing up a very early things, suddenly feel all recorded, small demo is relatively simple, welcome to discuss correct.

Before the UI design draft selection box do not want the default style, the default style is too heart plug, and some can not change, so simply write a p simulation of the selection box first look at the effect it:

Code implementation is not much, also is very simple, JS part is pure original sound, so do not need to refer to other frameworks can be used:

First HTML section:

<! DOCTYPE html>
 CSS section: 
 

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 part: (JS part is a little rough, now put up, these two days will be modified)



(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"; Initial ul hidden width = select_box.offsetwidth; The width of select defaults to 100% option_box.style.width = width + "px"; Initial ul width 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";                            Find Ul.son_ul Display} else {this.dataset.show = 0;                            This.classList.remove ("active"); This.nextElementSibling.style.display = "None";    Find Ul.son_ul Display}    },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) {//Standard browser document.addeventlistener (' Domco                Ntentloaded ', function () {Logoff time, avoid repeated triggering document.removeeventlistener (' domcontentloaded ', arguments.callee,false);                        FN ();        Run function},false);                            }else if (document.attachevent) {//ie browser document.attachevent (' onreadystatechange ', function () { if (document.readystate== ' complete ') {document.detachevent (' onreadystatechange ', argumen                    Ts.callee);                            FN ();        function Run}});            }} 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; }})();