jQuery 省市级联菜单代码实例
分享一段代码实例，它实现了城市级联菜单效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var address={'上海':['上海市'],'江苏':["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市", "连云港市"]};
(function ($) {
$(document).ready(function () {
var $provinceList = $('#province'), $cityList = $('#city'), provinceHTML = '';
for (province in address) {
var html = "<option value='" + province + "'>" + province + "</option>";
provinceHTML += html;
}
$provinceList.html(provinceHTML);
$provinceList.on('click', function () {
var province = $(this).val(), cityHTML = '';
for (city in address[province]) {
var html = "<option value='" + address[province][city] + "'>" + address[province][city] + "</option>";
cityHTML += html;
}
$cityList.html(cityHTML);
})
$provinceList.triggerHandler('click');
})
})(jQuery)
</script>
</head>
<body>
<div>
<label for="province">所在地区</label>
<select name="province" id="province">
</select>
<label for="city">城市</label>
<select name="city" id="city">
</select>
</div></body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var address={'上海':['上海市'],'江苏':["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市", "连云港市"]}，存放省市数据的json格式对象，为了节省空间，只是存放了少量数据。
（2）.(function ($) {})(jQuery)一个匿名自执行函数，传递的参数是jQuery对象。
（3）. $(document).ready(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（4）.var $provinceList = $('#province'), $cityList = $('#city'), provinceHTML = ''，初始化三个变量。
（5）.for (province in address) {
var html = "<option value='" + province + "'>" + province + "</option>";
provinceHTML += html;
}，通过for in语句遍历address对象属性，也就是省份，然后将其字符串连接生成<option>选项。
（6）.$provinceList.html(provinceHTML)，将生成的<option>字符串写入<select>标签中，这就是生成了省的select下拉菜单。
（7）.$provinceList.on('click', function () {})，为省份select下拉菜单注册click事件。
（8）.var province = $(this).val(), cityHTML = ''，初始化两个变量。
（9）.for (city in address[province]) {
var html = "<option value='" + address[province][city] + "'>" + address[province][city] + "</option>";
cityHTML += html;
}，遍历对应省份下的城市，并连接为<option>字符串。
（10）.$cityList.html(cityHTML)，将其写入城市<select>标签中。
（11）.$provinceList.triggerHandler('click')，触发click事件。
二.相关阅读:
（1）.html()可以参阅jQuery html()一章节。
（2）.triggerHandler()可以参阅jQuery triggerHandler()一章节。
jQuery 省市级联菜单代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery 省市级联菜单代码实例就介绍到这了。
jQuery 省市级联菜单代码实例属于前端实例代码，有关更多实例代码大家可以查看。