jQuery 省市級聯選單程式碼例項

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它實現了城市級聯選單效果。

程式碼例項如下:

[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()一章節。

相關文章