基于xml的三级联动
程序员文章站
2022-06-11 22:23:36
...
将数据保存在xml里
<province name="北京市">
<city name="北京市">
<country name="东城区"/>
<country name="西城区"/>
<country name="崇文区"/>
<country name="宣武区"/>
<country name="朝阳区"/>
<country name="丰台区"/>
<country name="石景山区"/>
<country name="海淀区"/>
<country name="门头沟区"/>
<country name="房山区"/>
<country name="通州区"/>
<country name="顺义区"/>
<country name="昌平区"/>
<country name="大兴区"/>
<country name="怀柔区"/>
<country name="平谷区"/>
<country name="密云县"/>
<country name="延庆县"/>
</city>
</province>
city.jsp
加载xml数据,并将省份信息添加到省份下拉框
<script type="text/javascript">
$(function () {
//加载省份列表信息
$.ajax({
//url:请求地址
url: "Area.xml",
//dataType:数据类型
dataType: "xml",
//success:成功后的回调函数
success: function (data) {
//找到(province)省份节点;
$(data).find("province").each(function () {
//加载(province)省份信息到列表中
$("<option></option>").html($(this).attr("name")).appendTo("#SelProvince");
})
},
error:function(jqXHR, textStatus, errorMsg){
alert(jqXHR+" + "+textStatus+" + "+errorMsg);
}
})
body内容
<body>
<table style="border: 1px solid gray">
<tr>
<td align="center" style="width: 130px;">
<select id="SelProvince" style="width: 100px;">
<option>请选择</option>
</select>
</td>
<td align="center" style="width: 130px;">
<select id="SelCity" style="width: 100px; margin-left: 10px;">
<option>请选择</option>
</select>
</td>
<td align="center" style="width: 130px;">
<select id="SelArea" style="width: 100px; margin-left: 10px;">
<option>请选择</option>
</select>
</td>
</tr>
</table>
</body>
当省份改变时触发第二级数据查询
//省份列表信息更改时，加载城市列表信息
$("#SelProvince").change(function () {
//省份值;
var value = $("#SelProvince").val();
if (value != "请选择") {
//显示城市下拉列表框删除城市下拉列表中的数据;
$("#SelCity").find("option").remove();
//加载城市列表中的请选择;
$("#SelCity").html("<option>请选择</option>");
//删除地区下拉列表中的数据;
$("#SelArea").find("option").remove();
//加载地区列表中的请选择;
$("#SelArea").html("<option>请选择</option>")
$.ajax({
url: "Area.xml",
dataType: "xml",
success: function (xml) {
//根据省份name属性得到子节点City节点name属性;
$(xml).find("[name='" + value + "']").find("city").each(function () {
//加载City(城市)信息到下拉列表中;
$("<option></option>").html($(this).attr("name")).appendTo("#SelCity");
})
}
})
}
})
当城市改变时触发第三级数据查询
$("#SelCity").change(function () {
//城市值;
var value = $("#SelCity").val();
if (value != "请选择") {
//显示地区下拉列表框删除地区下拉列表中的数据;
$("#SelArea").find("option").remove();
//加载地区列表中的请选择;
$("#SelArea").html("<option>请选择</option>");
$.ajax({
url: "Area.xml",
dataType: "xml",
success: function (xml) {
//根据城市节点name得到子节点Area节点name属性;
$(xml).find("[name='" + value + "']").find("country").each(function () {
//加载到Area(地区)下拉列表中;
$("<option></option>").html($(this).attr("name")).appendTo("#SelArea");
})
}
})
}
})
上一篇： nginx配置
下一篇： pytorch简单测试