自己写的简单三级联动（调用XML、JSON文件）

最新推荐文章于 2020-05-27 11:49:25 发布

DOREMI428

最新推荐文章于 2020-05-27 11:49:25 发布

阅读量883

点赞数

分类专栏： Test 文章标签：三级联动 XML JSON

本文链接：https://blog.csdn.net/doremi428/article/details/79157531

版权

Test 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

XML：

<?xml version="1.0" encoding="utf-8"?>
<cities>
<city id="ks" name = "昆山">
<depts>
<dept id="kskf" name="昆山">开发部</dept>
<staff id="kf1" name="kfb">小周周</staff>
<staff id="kf2" name="kfb">小周周</staff>
<staff id="kf3" name="kfb">小周周</staff>
<dept id="kscs" name="昆山">测试部</dept>
<staff id="cs1" name="csb">王小小</staff>
<staff id="cs2" name="csb">王小小</staff>
<staff id="cs3" name="csb">王小小</staff>
<dept id="kscp" name="昆山">产品部</dept>
<staff id="cp1" name="cpb">周晓晓</staff>
<staff id="cp2" name="cpb">周晓晓</staff>
<staff id="cp3" name="cpb">周晓晓</staff>
</depts>
</city>
<city id="sh" name="上海">
<depts>
<dept id="shxs" name="上海">销售部</dept>
<staff id="xs1" name="xsb">张大大</staff>
<staff id="xs2" name="xsb">张大大</staff>
<staff id="xs3" name="xsb">张大大</staff>
<dept id="shzl" name="上海">质量部</dept>
<staff id="zl1" name="zlb">小李子</staff>
<staff id="zl2" name="zlb">小李子</staff>
<staff id="zl3" name="zlb">小李子</staff>
<dept id="shaq" name="上海">安全部</dept>
<staff id="aq1" name="aqb">小渣子</staff>
<staff id="aq2" name="aqb">小渣子</staff>
<staff id="aq3" name="aqb">小渣子</staff>
</depts>
</city>
</cities>

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.get("cities.xml",function(data){
$(data).find("city").each(function(){
var nm = $(this).attr("name");
var ve = $(this).attr("id");
var cla = $(this).attr("name");
$("#city").append('<option value="' + ve + '"name="' + cla +'">' + nm + '</option>');
})
$(data).find("dept").each(function(){
var tt = $(this).text();
var va = $(this).attr("id");
var cla = $(this).attr("name");
$("#dem").append('<option value="' + va + '"name="' + cla +'">' + tt + '</option>');
})
$(data).find("staff").each(function(){
var text = $(this).text();
var ID = $(this).attr("id");
var name = $(this).attr("name");
$("#sta").append('<option value="' + ID + '"name="' + name +'">' + text + '</option>');
})
},"xml")
$("#city").change(function(){
var options=$("#city option:selected");
if(options.val() == "ks"){
$.get("cities.xml",function(data){
//$("option[name!='昆山']").remove();
$("#dem").find("option").each(function(){
if($(this).attr("name") != '昆山'){
$(this).hide();
}else{
$(this).show();
}
})
//var opobj = $("#dem").children("option[name!='昆山']");
},"xml")
}else if(options.val() == "sh"){
$.get("cities.xml",function(data){
//$("option[name!='上海']").remove();
$("#dem").find("option").each(function(){
if($(this).attr("name") != '上海'){
$(this).hide();
}else{
$(this).show();
}
})
},"xml")
}
})
$("#dem").change(function(){
var options=$("#dem option:selected");
if(options.val() == "kskf"){
$.get("cities.xml",function(data){
//$("option[name!='昆山']").remove();
$("#sta").find("option").each(function(){
if($(this).attr("name") != 'kfb'){
$(this).hide();
}else{
$(this).show();
}
})
//var opobj = $("#dem").children("option[name!='昆山']");
},"xml")
}else if(options.val() == "kscs"){
$.get("cities.xml",function(data){
//$("option[name!='上海']").remove();
$("#sta").find("option").each(function(){
if($(this).attr("name") != 'csb'){
$(this).hide();
}else{
$(this).show();
}
})
},"xml")
}else if(options.val() == "kscp"){
$.get("cities.xml",function(data){
//$("option[name!='上海']").remove();
$("#sta").find("option").each(function(){
if($(this).attr("name") != 'cpb'){
$(this).hide();
}else{
$(this).show();
}
})
},"xml")
}else if(options.val() == "shxs"){
$.get("cities.xml",function(data){
//$("option[name!='上海']").remove();
$("#sta").find("option").each(function(){
if($(this).attr("name") != 'xsb'){
$(this).hide();
}else{
$(this).show();
}
})
},"xml")
}else if(options.val() == "shzl"){
$.get("cities.xml",function(data){
//$("option[name!='上海']").remove();
$("#sta").find("option").each(function(){
if($(this).attr("name") != 'zlb'){
$(this).hide();
}else{
$(this).show();
}
})
},"xml")
}else if(options.val() == "shaq"){
$.get("cities.xml",function(data){
//$("option[name!='上海']").remove();
$("#sta").find("option").each(function(){
if($(this).attr("name") != 'aqb'){
$(this).hide();
}else{
$(this).show();
}
})
},"xml")
}
})
});
</script>
</head>

<body>
<select id="city">
<option>请选择城市</option>
</select>
<select id="dem">
<option value="" name=""></option>
</select>
<select id="sta">
<option value="" name=""></option>
</select>
</body>
</html>