<div id="cnblogs_post_body" class="blogpost-body "> <p>今天咱們要來分享一款很實用的jQuery插件,它是一個基於jQuery多級聯動的省市地區Select下拉框,而且值得一提的是,這款聯動下拉框是通過自定義美化過的,外觀比瀏覽器自帶的要漂亮許多。另外,這個Select下拉框也能夠綁定下拉事件,並獲取當前選中項的值。</p> <p>html代碼:</p> <p><div class="wrap"><br> <div class="nice-select" name="nice-select"><br> <input type="text" value="==選擇省份==" readonly><br> <ul><br> <li data-value="1">湖北省</li><br> <li data-value="2">廣東省</li><br> <li data-value="3">湖南省</li><br> <li data-value="4">四川省</li><br> </ul><br> </div><br> <div class="h20"><br> </div><br> <div class="nice-select" name="nice-select"><br> <input type="text" value="==選擇城市==" readonly><br> <ul><br> <li data-value="1">武漢市</li><br> <li data-value="2">深圳市</li><br> <li data-value="3">長沙市</li><br> <li data-value="4">成都市</li><br> </ul><br> </div><br> <div class="h20"><br> </div><br> <div class="nice-select" name="nice-select"><br> <input type="text" value="==選擇區縣==" readonly><br> <ul><br> <li data-value="1">蔡甸區</li><br> <li data-value="2">南山區</li><br> <li data-value="3">雨花區</li><br> <li data-value="4">武侯區</li><br> </ul><br> </div><br> </div><br> <script type="text/javascript" src="js/jquery.js"></script><br> <script><br> $('[name="nice-select"]').click(function (e) {<br> $('[name="nice-select"]').find('ul').hide();<br> $(this).find('ul').show();<br> e.stopPropagation();<br> });<br> $('[name="nice-select"] li').hover(function (e) {<br> $(this).toggleClass('on');<br> e.stopPropagation();<br> });<br> $('[name="nice-select"] li').click(function (e) {<br> var val = $(this).text();<br> var dataVal = $(this).attr("data-value");<br> $(this).parents('[name="nice-select"]').find('input').val(val);<br> $('[name="nice-select"] ul').hide();<br> e.stopPropagation();<br> alert("中文值是:" + val);<br> alert("數字值是:" + dataVal);<br> //alert($(this).parents('[name="nice-select"]').find('input').val());<br> });<br> $(document).click(function () {<br> $('[name="nice-select"] ul').hide();<br> });<br> </script></p> <p>css代碼:</p> <p> body<br> {<br> color: #555;<br> font-size: 14px;<br> font-family: "微軟雅黑" , "Microsoft Yahei";<br> background-color: #EEE;<br> }<br> a<br> {<br> color: #555;<br> }<br> a:hover<br> {<br> color: #f00;<br> }<br> input<br> {<br> font-size: 14px;<br> font-family: "微軟雅黑" , "Microsoft Yahei";<br> }<br> .wrap<br> {<br> width: 500px;<br> margin: 100px auto;<br> }<br> .h20<br> {<br> height: 20px;<br> overflow: hidden;<br> clear: both;<br> }<br> .nice-select<br> {<br> width: 245px;<br> padding: 0 10px;<br> height: 38px;<br> border: 1px solid #999;<br> position: relative;<br> box-shadow: 0 0 5px #999;<br> background: #fff url(images/a2.jpg) no-repeat right center;<br> cursor: pointer;<br> }<br> .nice-select input<br> {<br> display: block;<br> width: 100%;<br> height: 38px;<br> line-height: 38px \9;<br> border: 0;<br> outline: 0;<br> background: none;<br> cursor: pointer;<br> }<br> .nice-select ul<br> {<br> width: 100%;<br> display: none;<br> position: absolute;<br> left: -1px;<br> top: 38px;<br> overflow: hidden;<br> background-color: #fff;<br> max-height: 150px;<br> overflow-y: auto;<br> border: 1px solid #999;<br> border-top: 0;<br> box-shadow: 0 3px 5px #999;<br> z-index: 9999;<br> }<br> .nice-select ul li<br> {<br> height: 30px;<br> line-height: 30px;<br> overflow: hidden;<br> padding: 0 10px;<br> cursor: pointer;<br> }<br> .nice-select ul li.on<br> {<br> background-color: #e0e0e0;<br> }</p> </div>javascript