jQuery makes simple multi stage linkage Select drop down box
- 2020-05-07 19:16:00
- OfStack
Today we are going to share a very practical jQuery plug-in, which is a multi-level jQuery linkage based on the provinces and cities Select drop-down box, and it is worth mentioning that this linkage drop-down box is customized beautification, the appearance of the browser is much more beautiful. In addition, the Select drop-down box can also bind the drop-down event and get the value of the currently selected item.
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 province </li>
<li data-value="2"> Guangdong province, </li>
<li data-value="3"> Hunan province </li>
<li data-value="4">4 Sichuan province </li>
</ul>
</div>
<div class="h20">
</div>
<div class="nice-select" name="nice-select">
<input type="text" value="== Select the city ==" readonly>
<ul>
<li data-value="1"> Wuhan city </li>
<li data-value="2"> shenzhen </li>
<li data-value="3"> Changsha city </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 area 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"] ul').hide();
e.stopPropagation();
alert(" The Chinese value is: " + val);
alert(" The numerical value is: " + dataVal);
//alert($(this).parents('[name="nice-select"]').find('input').val());
});
$(document).click(function () {
$('[name="nice-select"] ul').hide();
});
</script>
css code:
body
{
color: #555;
font-size: 14px;
font-family: " Microsoft jas black " , "Microsoft Yahei";
background-color: #EEE;
}
a
{
color: #555;
}
a:hover
{
color: #f00;
}
input
{
font-size: 14px;
font-family: " Microsoft jas black " , "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 simple, I won't do much here to explain, the partners themselves under the preview will know how simple and generous the effect is, very practical.