jquery填充select下拉列表,三级联动

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta charset="UTF-8" />
<title>无标题页</title>
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
</head>


<body>
<select id="ClassLevel2">

</select>
</body>
<script type="text/javascript">
//绑定ClassLevel1单击事件
$("#ClassLevel1").change(function() {
var id = $("#ClassLevel1").val();
var level2 = $("#ClassLevel2");
level2.empty();
$("#ClassLevel3").hide();
$.ajax({
url: "selectData.do?action=getData&pid=" + id,
data: {
"type": "ajax"
},
datatype: "json",
type: "get",
success: function(data) {
var json = eval_r(data);
for(var ind in json) {
level2.append($("<option value='" + json[ind].id + "'>" + json[ind].typename + "</option>"));
}
}
});
});
</script>


</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是利用ajax实现三级联动下拉列表的步骤: 1. 在HTML页面中创建三个select标签,分别代表省、市、县(或区)的下拉列表。 2. 在JavaScript中定义一个函数,用于获取省份数据。该函数会向服务器发送一个ajax请求,并将返回的数据填充到省份下拉列表中。 3. 在省份下拉列表中添加一个onchange事件,当用户选择省份时,该事件会触发一个函数。 4. 该函数会向服务器发送一个ajax请求,请求该省份下所有的城市数据,并将返回的数据填充到城市下拉列表中。 5. 在城市下拉列表中添加一个onchange事件,当用户选择城市时,该事件会触发一个函数。 6. 该函数会向服务器发送一个ajax请求,请求该城市下所有的县(或区)数据,并将返回的数据填充到县(或区)下拉列表中。 7. 完成以上步骤后,用户就可以通过选择三个下拉列表来完成三级联动选择。 下面是一个简单的示例代码,仅供参考: HTML代码: ``` <select id="province"></select> <select id="city"></select> <select id="county"></select> ``` JavaScript代码: ``` // 获取省份数据 function getProvince() { $.ajax({ type: "GET", url: "province.json", dataType: "json", success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#province").html(html); getCity(); } }); } // 获取城市数据 function getCity() { var provinceId = $("#province").val(); $.ajax({ type: "GET", url: "city.json", dataType: "json", data: { provinceId: provinceId }, success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#city").html(html); getCounty(); } }); } // 获取县(或区)数据 function getCounty() { var cityId = $("#city").val(); $.ajax({ type: "GET", url: "county.json", dataType: "json", data: { cityId: cityId }, success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#county").html(html); } }); } $(function() { getProvince(); // 初始化省份数据 $("#province").change(function() { getCity(); // 当省份变化时,获取城市数据 }); $("#city").change(function() { getCounty(); // 当城市变化时,获取县(或区)数据 }); }); ``` 说明: 1. 该示例中使用了jQuery库来简化ajax请求的操作。 2. 省份、城市、县(或区)数据的格式可以自行定义,示例中使用了json格式的数据。 3. 在实际应用中,服务器端需要根据请求参数返回相应的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值