{
"id": 1,
"text": "北京市",
"code": 110000,
"parentId": 0
},
{
"id": 2,
"text": "河北省",
"code": 220000,
"parentId": 0
},
{
"id": 3,
"text": "河南省",
"code": 330000,
"parentId": 0
}

//查第一個(gè)級(jí)聯(lián)項(xiàng)的列表
/api/cascade?parentId=0
//根據(jù)第一個(gè)級(jí)聯(lián)項(xiàng)選的值，查第二個(gè)級(jí)聯(lián)項(xiàng)的列表
/api/cascade?parentId=1
//根據(jù)第二個(gè)級(jí)聯(lián)項(xiàng)選的值，查第三個(gè)級(jí)聯(lián)項(xiàng)的列表
/api/cascade?parentId=4

<ul id="licenseLocation-view" class="cascade-view clearfix">
<li>
<select class="form-control">
<option value="">請(qǐng)選擇省份</option>
</select>
</li>
<li>
<select class="form-control">
<option value="">請(qǐng)選擇城市</option>
</select>
</li>
<li>
<select class="form-control">
<option value="">請(qǐng)選擇區(qū)縣</option>
</select>
</li>
</ul>

<ul id="companyLocation-view" class="cascade-view clearfix">
<li>
<select class="form-control">
</select>
</li>
<li>
<select class="form-control">
</select>
</li>
<li>
<select class="form-control">
</select>
</li>
</ul>

define(function () {
return {
url: '',//數(shù)據(jù)查詢接口
textField: 'text', //返回的數(shù)據(jù)中要在<option>元素內(nèi)顯示的字段名稱
valueField: 'text', //返回的數(shù)據(jù)中要設(shè)置在<option>元素的value上的字段名稱
paramField: 'id', //當(dāng)調(diào)用數(shù)據(jù)查詢接口時(shí)，要傳遞給后臺(tái)的數(shù)據(jù)對(duì)應(yīng)的字段名稱
paramName: 'parentId', //當(dāng)調(diào)用數(shù)據(jù)查詢接口時(shí)，跟在url后面?zhèn)鬟f數(shù)據(jù)的參數(shù)名
defaultParam: '', //當(dāng)查詢第一個(gè)級(jí)聯(lián)項(xiàng)時(shí)，傳遞給后臺(tái)的值，一般是0，''，或者-1等，表示要查詢第上層的數(shù)據(jù)
keepFirstOption: true, //是否保留第一個(gè)option（用作輸入提示，如：請(qǐng)選擇省份），如果為true，在重新加載級(jí)聯(lián)項(xiàng)時(shí)，不會(huì)清除默認(rèn)的第一個(gè)option
resolveAjax: function (res) {
return res;
}//因?yàn)榧?jí)聯(lián)項(xiàng)在加載數(shù)據(jù)的時(shí)候會(huì)發(fā)異步請(qǐng)求，這個(gè)回調(diào)用來解析異步請(qǐng)求返回的響應(yīng)
}
});

define(function (require, exports, module) {
var $ = require('jquery');
var Class = require('mod/class');
var EventBase = require('mod/eventBase');
var PublicDefaults = require('mod/cascadePublicDefaults');
var CascadeItem = require('mod/cascadeItem');
/**
* PublicDefaults的作用見CascadeItem組件內(nèi)的注釋
*/
var DEFAULTS = $.extend({}, PublicDefaults, {
$elements: undefined, //級(jí)聯(lián)項(xiàng)jq對(duì)象的數(shù)組，元素在數(shù)據(jù)中的順序代表級(jí)聯(lián)的先后順序
valueSeparator: ',', //獲取所有級(jí)聯(lián)項(xiàng)的值時(shí)使用的分隔符，如果是英文逗號(hào)，返回的值形如 北京市,區(qū),朝陽區(qū)
values: '', //用valueSeparator分隔的字符串，表示初始時(shí)各個(gè)select的值
onChanged: $.noop //當(dāng)任意級(jí)聯(lián)項(xiàng)的值發(fā)生改變的時(shí)候會(huì)觸發(fā)這個(gè)事件
});
var CascadeView = Class({
instanceMembers: {
init: function (options) {
//通過this.base調(diào)用父類EventBase的init方法
this.base();
var opts = this.options = this.getOptions(options),
items = this.items = [],
that = this,
$elements = opts.$elements,
values = opts.values.split(opts.valueSeparator);
this.on('changed.cascadeView', $.proxy(opts.onChanged, this));
$elements && $elements.each(function (i) {
var $el = $(this);
//實(shí)例化CascadeItem組件，并把每個(gè)實(shí)例的prevItem屬性指向前一個(gè)實(shí)例
//第一個(gè)prevItem屬性設(shè)置為undefined
var cascadeItem = new CascadeItem($el, $.extend(that.getItemOptions(), {
prevItem: i == 0 ? undefined : items[i - 1],
value: $.trim(values[i])
}));
items.push(cascadeItem);
//每個(gè)級(jí)聯(lián)項(xiàng)實(shí)例發(fā)生改變都會(huì)觸發(fā)CascadeView組件的changed事件
//外部可在這個(gè)回調(diào)內(nèi)處理業(yè)務(wù)邏輯
//比如將所有級(jí)聯(lián)項(xiàng)的值設(shè)置到一個(gè)隱藏域里面，用于表單提交
cascadeItem.on('changed.cascadeItem', function () {
that.trigger('changed.cascadeView', that.getValue());
});
});
//初始化完成自動(dòng)加載第一個(gè)級(jí)聯(lián)項(xiàng)
items.length && items[0].load();
},
getOptions: function (options) {
return $.extend({}, this.getDefaults(), options);
},
getDefaults: function () {
return DEFAULTS;
},
getItemOptions: function () {
var opts = {}, _options = this.options;
for (var i in PublicDefaults) {
if (PublicDefaults.hasOwnProperty(i) && i in _options) {
opts[i] = _options[i];
}
}
return opts;
},
//獲取所有級(jí)聯(lián)項(xiàng)的值，是一個(gè)用valueSeparator分隔的字符串
//為空的級(jí)聯(lián)項(xiàng)的值不會(huì)返回
getValue: function () {
var value = [];
this.items.forEach(function (item) {
var val = $.trim(item.getValue());
val != '' && value.push(val);
});
return value.join(this.options.valueSeparator);
}
},
extend: EventBase
});
return CascadeView;
});

define(function (require, exports, module) {
var $ = require('jquery');
var Class = require('mod/class');
var EventBase = require('mod/eventBase');
var PublicDefaults = require('mod/cascadePublicDefaults');
var AjaxCache = require('mod/ajaxCache');
//這是一個(gè)可緩存的Ajax組件
var Ajax = new AjaxCache();
/**
* 有一部分option定義在PublicDefaults里面，因?yàn)镃ascadeItem組件不會(huì)被外部直接使用
* 外部用的是CascadeView組件，所以有一部分的option必須變成公共的，在CascadeView組件也定義一次
* 外部通過CascadeView組件傳遞所有的option
* CascadeView內(nèi)部實(shí)例化CascadeItem的時(shí)候，再把PublicDefaults內(nèi)的option傳遞給CascadeItem
*/
var DEFAULTS = $.extend({}, PublicDefaults, {
prevItem: undefined, // 指向前一個(gè)級(jí)聯(lián)項(xiàng)
value: '' //初始時(shí)顯示的value
});
var CascadeItem = Class({
instanceMembers: {
init: function ($el, options) {
//通過this.base調(diào)用父類EventBase的init方法
this.base($el);
this.$el = $el;
this.options = this.getOptions(options);
this.prevItem = this.options.prevItem; //前一個(gè)級(jí)聯(lián)項(xiàng)
this.hasContent = false;//這個(gè)變量用來控制是否需要重新加載數(shù)據(jù)
this.cache = {};//用來緩存數(shù)據(jù)
var that = this;
//代理select元素的change事件
$el.on('change', function () {
that.trigger('changed.cascadeItem');
});
//當(dāng)前一個(gè)級(jí)聯(lián)項(xiàng)的值發(fā)生改變的時(shí)候，根據(jù)需要做清空和重新加載數(shù)據(jù)的處理
this.prevItem && this.prevItem.on('changed.cascadeItem', function () {
//只要前一個(gè)的值發(fā)生改變并且自身有內(nèi)容的時(shí)候，就得清空內(nèi)容
that.hasContent && that.clear();
//如果不是第一個(gè)級(jí)聯(lián)項(xiàng)，同時(shí)前一個(gè)級(jí)聯(lián)項(xiàng)沒有選中有效的option時(shí)，就不處理
if (that.prevItem && $.trim(that.prevItem.getValue()) == '') return;
that.load();
});
var value = $.trim(this.options.value);
value !== '' && this.one('render.cascadeItem', function () {
//設(shè)置初始值
that.$el.val(value.split(','));
//通知后面的級(jí)聯(lián)項(xiàng)做清空和重新加載數(shù)據(jù)的處理
that.trigger('changed.cascadeItem');
});
},
getOptions: function (options) {
return $.extend({}, this.getDefaults(), options);
},
getDefaults: function () {
return DEFAULTS;
},
clear: function () {
var $el = this.$el;
$el.val('');
if (this.options.keepFirstOption) {
//保留第一個(gè)option
$el.children().filter(':gt(0)').remove();
} else {
//清空全部
$el.html('');
}
//通知后面的級(jí)聯(lián)項(xiàng)做清空和重新加載數(shù)據(jù)的處理
this.trigger('changed.cascadeItem');
this.hasContent = false;//表示內(nèi)容為空
},
load: function () {
var opts = this.options,
paramValue,
that = this,
dataKey;
//dataKey是在cache緩存時(shí)用的鍵名
//由于第一個(gè)級(jí)聯(lián)項(xiàng)的數(shù)據(jù)是頂層數(shù)據(jù)，所以在緩存的時(shí)候用的是固定且唯一的鍵：root
//其它級(jí)聯(lián)項(xiàng)的數(shù)據(jù)緩存時(shí)用的鍵名跟前一個(gè)選擇的option有關(guān)
if (!this.prevItem) {
paramValue = opts.defaultParam;
dataKey = 'root';
} else {
paramValue = this.prevItem.getParamValue();
dataKey = paramValue;
}
//先看數(shù)據(jù)緩存中有沒有加載過的數(shù)據(jù)，有就直接顯示出來，避免Ajax
if (dataKey in this.cache) {
this.render(this.cache[dataKey]);
} else {
var params = {};
params[opts.paramName] = paramValue;
Ajax.get(opts.url, params).done(function (res) {
//resolveAjax這個(gè)回調(diào)用來在外部解析ajax返回的數(shù)據(jù)
//它需要返回一個(gè)data數(shù)組
var data = opts.resolveAjax(res);
if (data) {
that.cache[dataKey] = data;
that.render(data);
}
});
}
},
render: function (data) {
var html = [],
opts = this.options;
data.forEach(function (item) {
html.push(['<option value="',
item[opts.valueField],
'" data-param-value="',//將paramField對(duì)應(yīng)的值存放在option的data-param-value屬性上
item[opts.paramField],
'">',
item[opts.textField],
'</option>'].join(''));
});
//采用append的方式動(dòng)態(tài)添加，避免影響第一個(gè)option
//最后還要把value設(shè)置為空
this.$el.append(html.join('')).val('');
this.hasContent = true;//表示有內(nèi)容
this.trigger('render.cascadeItem');
},
getValue: function () {
return this.$el.val();
},
getParamValue: function () {
return this.$el.find('option:selected').data('paramValue');
}
},
extend: EventBase
});
return CascadeItem;
});

define(function (require, exports, module) {
  var $ = require('jquery');
  var CascadeView = require('mod/cascadeView');
  function publicSetCascadeView(fieldName, opts) {
    this.cascadeView = new CascadeView({
      $elements: $('#' + fieldName + '-view').find('select'),
      url: '../api/cascade.json',
      onChanged: this.onChanged,
      values: opts.values,
      keepFirstOption: this.keepFirstOption,
      resolveAjax: function (res) {
        if (res.code == 200) {
          return res.data;
        }
      }
    });
  }
  var LOCATION_VIEWS = {
    licenseLocation: {
      $input: $('input[name="licenseLocation"]'),
      keepFirstOption: true,
      setCascadeView: publicSetCascadeView,
      onChanged: function(e, value){
        LOCATION_VIEWS.licenseLocation.$input.val(value);
      }
    },
    companyLocation: {
      $input: $('input[name="companyLocation"]'),
      keepFirstOption: false,
      setCascadeView: publicSetCascadeView,
      onChanged: function(e, value){
        LOCATION_VIEWS.companyLocation.$input.val(value);
      }
    }
  };
  LOCATION_VIEWS.licenseLocation.setCascadeView('licenseLocation', {
    values: LOCATION_VIEWS.licenseLocation.$input.val()
  });
  LOCATION_VIEWS.companyLocation.setCascadeView('companyLocation', {
    values: LOCATION_VIEWS.companyLocation.$input.val()
  });
});