今天做了个城市四级联动jquery方法,简单实现了调用数据的城市四级联动所需要的功能。此方法仅供逻辑思维参考,请勿直接复制,可能与实际功能不符。
<tr class="qrows">
<th class="hidden-sm col-md-1 borderd"> 区域 </th>
<td class="col-sm-12 col-md-4 borderd" data-title="区域">
<div class="row">
<div class="col-xs-12 col-sm-3">
<select name="province" class="form-control" id="province" onchange="getCity('province','city');">
<option value="">请选择</option>
<loop data="result">
<option value="{a_id}-{a_level}">{a_name}</option>
</loop>
</select>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-3" >
<select class="form-control" onchange="getCity('city','county');" id="city">
<option value="">请选择</option>
</select>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-3">
<select class="form-control" onchange="getCity('county','area');" id="county">
<option value="">请选择</option>
</select>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-3">
<select class="form-control" id="area">
<option value="">请选择</option>
</select>
</div>
</div>
</td>
</tr>
<script type="text/javascript">
/*城市四级联动:id1为联动的取值ID;id2为联动的写入值ID*/
function getCity(id1,id2){
var setval = $("#"+id1).val();
var arry = setval.split("-");
/*写入不同的代理等级*/
if(id1 == 'province'){
$("#level label").html('');
$("#level label").html(arry[1]+"级");
$("#level input[name='level']").val(arry[1]);
}
/*获取城市联动的下级值*/
if(setval.length > 0){
$.ajax({
type: "post",
cache: false,
data:{'_ajax': 1, id: arry[0]},
url: '/company/area.json',
dataType: "html",
success: function (res) {
$("#"+id2).html('');
$("#"+id2).html(res);
}
});
}
}
</script>