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

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

<ul id="licenseLocation-view" class="cascade-view clearfix">
<li>
<select class="form-control">
<option value="">請選擇省份</option>
</select>
</li>
<li>
<select class="form-control">
<option value="">請選擇城市</option>
</select>
</li>
<li>
<select class="form-control">
<option value="">請選擇區(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', //當調(diào)用數(shù)據(jù)查詢接口時，要傳遞給后臺的數(shù)據(jù)對應(yīng)的字段名稱
paramName: 'parentId', //當調(diào)用數(shù)據(jù)查詢接口時，跟在url后面?zhèn)鬟f數(shù)據(jù)的參數(shù)名
defaultParam: '', //當查詢第一個級聯(lián)項時，傳遞給后臺的值，一般是0，''，或者-1等，表示要查詢第上層的數(shù)據(jù)
keepFirstOption: true, //是否保留第一個option（用作輸入提示，如：請選擇省份），如果為true，在重新加載級聯(lián)項時，不會清除默認的第一個option
resolveAjax: function (res) {
return res;
}//因為級聯(lián)項在加載數(shù)據(jù)的時候會發(fā)異步請求，這個回調(diào)用來解析異步請求返回的響應(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, //級聯(lián)項jq對象的數(shù)組，元素在數(shù)據(jù)中的順序代表級聯(lián)的先后順序
valueSeparator: ',', //獲取所有級聯(lián)項的值時使用的分隔符，如果是英文逗號，返回的值形如 北京市,區(qū),朝陽區(qū)
values: '', //用valueSeparator分隔的字符串，表示初始時各個select的值
onChanged: $.noop //當任意級聯(lián)項的值發(fā)生改變的時候會觸發(fā)這個事件
});
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);
//實例化CascadeItem組件，并把每個實例的prevItem屬性指向前一個實例
//第一個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);
//每個級聯(lián)項實例發(fā)生改變都會觸發(fā)CascadeView組件的changed事件
//外部可在這個回調(diào)內(nèi)處理業(yè)務(wù)邏輯
//比如將所有級聯(lián)項的值設(shè)置到一個隱藏域里面，用于表單提交
cascadeItem.on('changed.cascadeItem', function () {
that.trigger('changed.cascadeView', that.getValue());
});
});
//初始化完成自動加載第一個級聯(lián)項
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;
},
//獲取所有級聯(lián)項的值，是一個用valueSeparator分隔的字符串
//為空的級聯(lián)項的值不會返回
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');
//這是一個可緩存的Ajax組件
var Ajax = new AjaxCache();
/**
* 有一部分option定義在PublicDefaults里面，因為CascadeItem組件不會被外部直接使用
* 外部用的是CascadeView組件，所以有一部分的option必須變成公共的，在CascadeView組件也定義一次
* 外部通過CascadeView組件傳遞所有的option
* CascadeView內(nèi)部實例化CascadeItem的時候，再把PublicDefaults內(nèi)的option傳遞給CascadeItem
*/
var DEFAULTS = $.extend({}, PublicDefaults, {
prevItem: undefined, // 指向前一個級聯(lián)項
value: '' //初始時顯示的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; //前一個級聯(lián)項
this.hasContent = false;//這個變量用來控制是否需要重新加載數(shù)據(jù)
this.cache = {};//用來緩存數(shù)據(jù)
var that = this;
//代理select元素的change事件
$el.on('change', function () {
that.trigger('changed.cascadeItem');
});
//當前一個級聯(lián)項的值發(fā)生改變的時候，根據(jù)需要做清空和重新加載數(shù)據(jù)的處理
this.prevItem && this.prevItem.on('changed.cascadeItem', function () {
//只要前一個的值發(fā)生改變并且自身有內(nèi)容的時候，就得清空內(nèi)容
that.hasContent && that.clear();
//如果不是第一個級聯(lián)項，同時前一個級聯(lián)項沒有選中有效的option時，就不處理
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(','));
//通知后面的級聯(lián)項做清空和重新加載數(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) {
//保留第一個option
$el.children().filter(':gt(0)').remove();
} else {
//清空全部
$el.html('');
}
//通知后面的級聯(lián)項做清空和重新加載數(shù)據(jù)的處理
this.trigger('changed.cascadeItem');
this.hasContent = false;//表示內(nèi)容為空
},
load: function () {
var opts = this.options,
paramValue,
that = this,
dataKey;
//dataKey是在cache緩存時用的鍵名
//由于第一個級聯(lián)項的數(shù)據(jù)是頂層數(shù)據(jù)，所以在緩存的時候用的是固定且唯一的鍵：root
//其它級聯(lián)項的數(shù)據(jù)緩存時用的鍵名跟前一個選擇的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這個回調(diào)用來在外部解析ajax返回的數(shù)據(jù)
//它需要返回一個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對應(yīng)的值存放在option的data-param-value屬性上
item[opts.paramField],
'">',
item[opts.textField],
'</option>'].join(''));
});
//采用append的方式動態(tài)添加，避免影響第一個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()
  });
});