JQuery creates a simple multi-level interactive Select drop-down box and a jqueryselect drop-down box

JQuery creates a simple multi-level 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.

Html code:

Copy codeThe Code is as follows:
<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 a 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>
</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:

Copy codeThe Code is as follows:
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;
}

The code is very concise. I will not explain it more here. My friends will know how simple and generous the effect is when previewing the code. It is very practical.