jq插件之联动bxSelect

1.载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>

2.DOM 结构

<!--
select 必须放在元素 id="element_id" 的内部，不限层级
select 的 class 任意取值，也可以附加多个 class，如 class="province otherclass"，在调用时只需要输入其中一个即可，但是不能重复
-->
<div id="element_id">
  <select class="province" ></select>
  <select class="city"></select>
  <select class="area"></select>
</div>

3.设置默认值

<!-- 方法一：使用 option 的 value 和 selected 属性 -->
<select class="province">
  <option value="浙江省" selected>浙江省</option>
</select>

<!-- 方法二：使用 select 的 data-value 属性 推荐-->
<select class="province" data-value="浙江省"></select>

4.调用 cxSelect

(function() {
  var urlChina = 'js/cityData.json';

  $.cxSelect.defaults.url = urlChina;

  $('#city_china').cxSelect({
    selects: ['province', 'city', 'area']
  });

})();