所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。例如两个下拉列表，分别是国家和省份，当第一个下拉框选择国家的时候，第二个下拉框会显示相应的省份。这里我们以真实数据库数据模拟，通过ajax请求拿到数据进行渲染。
工具/原料
-
JavaScript原理需要了解
-
ajax请求
-
bootstrap基础
方法/步骤
-
1
国家下拉框数据填充：
<div class="form-group">
<label class="col-sm-3 control-label">国家和地区<i class="required">*</i></label>
<div class="col-sm-9">
<select id="country" class="col-md-12 validate"
placeholder="请选择国家和地区">
</select>
</div>
</div>
-
2
省份下拉框数据填充：
<div class="form-group">
<label class="col-sm-3 control-label">省份</label>
<div class="col-sm-9">
<select id="state" class="col-md-12 validate"
placeholder="请选择省份">
</select>
</div>
</div>
-
3
js调用
<script type="text/javascript">
getCountryForSpinner("ltCountry", countryID);
getStateForSpinner("ltState", stateID, countryID);
</script>
END
注意事项
-
具体代码和返回的JSON数据要根据实际情况转换
-
首先填充好数据库，另外ajax数据请求要对哦
文章评论