基于Jquery级联选择器插件
时间: 2024-05-15 14:12:17 浏览: 13
JQuery级联选择器插件可以方便地实现多级联动选择,常用于省市区、品牌系列等多级选择场景。以下是一个基于JQuery的级联选择器插件的示例代码:
HTML部分:
```html
<select id="province">
<option value="">请选择省份</option>
<option value="1">浙江省</option>
<option value="2">江苏省</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
```
JS部分:
```javascript
$(function(){
$("#province").change(function(){
var pid = $(this).val();
if (pid == "") {
$("#city").html("<option value=''>请选择城市</option>");
$("#district").html("<option value=''>请选择区县</option>");
return;
}
$.ajax({
type: "GET",
url: "getCity.php",
data: {"pid": pid},
dataType: "json",
success: function(data){
var options = "<option value=''>请选择城市</option>";
for (var i=0; i<data.length; i++) {
options += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
}
$("#city").html(options);
$("#district").html("<option value=''>请选择区县</option>");
}
});
});
$("#city").change(function(){
var cid = $(this).val();
if (cid == "") {
$("#district").html("<option value=''>请选择区县</option>");
return;
}
$.ajax({
type: "GET",
url: "getDistrict.php",
data: {"cid": cid},
dataType: "json",
success: function(data){
var options = "<option value=''>请选择区县</option>";
for (var i=0; i<data.length; i++) {
options += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
}
$("#district").html(options);
}
});
});
});
```
以上代码实现了省市区三级联动选择,当省份选择发生变化时,通过ajax请求获取对应城市列表并更新城市选择框;当城市选择发生变化时,通过ajax请求获取对应区县列表并更新区县选择框。