A jQuery-based interactive Select drop-down box and a jqueryselect drop-down box

A jQuery-based interactive Select drop-down box and a jqueryselect drop-down box

Today we will share a very practical jQuery plug-in, which is a Select drop-down Box Based on jQuery multi-level linkage between provinces and cities, and it is worth mentioning that, this linkage drop-down box is customized and beautified, And the appearance is much more beautiful than that of the browser. In addition, you can bind a drop-down event to the Select drop-down box and obtain the value of the selected item.

Download Online Preview source code

Implementation code.

Html code:

<Div class = "wrap"> <div class = "nice-select" name = "nice-select"> <input type = "text" value = "= select province = = "readonly> <ul> <li data-value =" 1 "> Hubei </li> <li data-value =" 2 "> Guangdong </li> <li data -value = "3"> Hunan </li> <li data-value = "4"> Sichuan </li> </ul> </div> <div class =" h20 "> </div> <div class =" nice-select "name =" nice-select "> <input type =" text "value =" = select city = "readonly> <ul> <li data-value =" 1 "> Wuhan </li> <li data-value =" 2 "> Shenzhen </li> <li data- value = "3"> Changsha </li> <li data-value = "4"> Chengdu </li> </ul> </div> <div class = "h20 "> </div> <div class =" nice-select "name =" nice-select "> <input type =" text "value =" = select district/county =" readonly> <ul> <li data-value = "1"> caidian district </li> <li data-value = "2"> Nanshan District </li> <li data-value = "3"> Yuhua district </li> <li data-value = "4"> Wuhou District </li> </ul> </div> <script type = "text/javascript" src = "js/jquery. js "> </script> <script> $ ('[name =" nice-select "]'). click (function (e) {$ ('[name = "nice-select"]'). find ('ul '). hide (); $ (this ). find ('ul '). show (); e. stopPropagation () ;}); $ ('[name = "nice-select"] li '). hover (function (e) {$ (this ). toggleClass ('on'); e. stopPropagation () ;}); $ ('[name = "nice-select"] li '). click (function (e) {var val = $ (this ). text (); var dataVal =$ (this ). attr ("data-value"); $ (this ). parents ('[name = "nice-select"]'). find ('input '). val (val); $ ('[name = "nice-select"] U '). hide (); e. stopPropagation (); alert ("Chinese value:" + val); alert ("numeric value:" + dataVal); // alert ($ (this ). parents ('[name = "nice-select"]'). find ('input '). val () ;}); $ (document ). click (function () {$ ('[name = "nice-select"] U '). hide () ;}); </script>

Css code:

Body {color: #555; font-size: 14px; font-family: "", "Microsoft Yahei"; background-color: # EEE;} a {color: #555;} a: hover {color: # f00;} input {font-size: 14px; font-family: "", "Microsoft Yahei ";}. wrap {width: 500px; margin: 100px auto ;}. h20 {height: 20px; overflow: hidden; clear: both ;}. nice-select {width: 245px; padding: 0 10px; height: 38px; border: 1px solid #999; position: relative; box-shadow: 0 0 5px #999; background: # fff url (images/a2.jpg) no-repeat right center; cursor: pointer ;}. nice-select input {display: block; width: 100%; height: 38px; line-height: 38px \ 9; border: 0; outline: 0; background: none; cursor: pointer ;}. nice-select ul {width: 100%; display: none; position: absolute; left:-1px; top: 38px; overflow: hidden; background-color: # fff; max-height: 150px; overflow-y: auto; border: 1px solid #999; border-top: 0; box-shadow: 0 3px 5px #999; z-index: 9999 ;}. nice-select ul li {height: 30px; line-height: 30px; overflow: hidden; padding: 0 10px; cursor: pointer ;}. nice-select ul li. on {background-color: # e0e0e0 ;}

Via: http://www.w2bc.com/Article/12982