jQuery 省市级联菜单代码实例

2017-4-18 08:46| 作者: antzone| 查看: 463| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了城市级联菜单效果。

代码实例如下:

[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部