简化xml的三级联动

最新推荐文章于 2021-06-17 20:47:16 发布

夕阳下炸了的芋头(ง •̀_•́)ง

最新推荐文章于 2021-06-17 20:47:16 发布

阅读量316

点赞数

分类专栏： jQuery 文章标签：简化版三级联动

本文链接：https://blog.csdn.net/wanwenjieGood/article/details/83657382

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

笔记：简化版

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script type="text/javascript">
	$(function(){
		$.ajax({
			url:"Area.xml",
			dataType:"xml",
			success:function(data){
				$(data).find("province").each(function(k,v){
					$("<option></option>").html($(this).attr("name")).appendTo("#SelProvince");
				});
			}
		});
		
		
		$("#SelProvince").change(function(){
			var province=$("#SelProvince").val();
			//清楚之前的市及信息
			$("#SelCity").empty();
			$("#SelCity").html("<option>请选择</option>");
			$.ajax({
				url:"Area.xml",
				dataType:"xml",
				success:function(data){
					$(data).find("[name="+province+"]").find("city").each(function(k,v){
						$("<option></option>").html($(this).attr("name")).appendTo("#SelCity");
					});
				}
			});
		});
		
		$("#SelCity").change(function(){
			var city=$("#SelCity").val();
			//清楚之前的市及信息
			$("#SelArea").empty();
			$("#SelArea").html("<option>请选择</option>");
			$.ajax({
				url:"Area.xml",
				dataType:"xml",
				success:function(data){
					$(data).find("[name="+city+"]").find("country").each(function(k,v){
						$("<option></option>").html($(this).attr("name")).appendTo("#SelArea");
					});
				}
			});
		});
	});
</script>
</head>
<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>
</html>

若需要将下拉框选中的数据提交到后台，看代码

<script type="text/javascript">
		//jquery写法
		function check(){
			//拿到选中项的值,如果value没有值那么拿到的就是文本值，如果有value那么就拿value的值
			var Province=$("#SelProvince option:selected").val();
			alert(Province);
			//拿到选中想的文本值
			var Province1=$("#SelProvince option:selected").text();
			alert(Province1);
		}
		
		//js写法
		function check1(){
			var Province=document.getElementById("SelProvince");
			//获取下拉框选中的索引
			var index=Province.selectedIndex;
			//拿到选中项的值,如果value没有值那么拿到的就是文本值，如果有value那么就拿value的值
			var value=Province[index].value;
			alert(value);
			//拿到选中想的文本值
			var text=Province[index].text;
			alert(text);
		}
	</script>

大功告成

xml写法：

<address>
<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>
</address>

注意：中括号在xml里面找到name等于xxx的标签，然后在xxx标签里找子标签
//
var province=$("#SelProvince").val();
$.ajax({
url:“Area.xml”,
dataType:“xml”,
success:function(data){
$(data).find("[name="+province+"]").find(“city”).each(function(k,v){

		$("<option</option>").html($(this).attr("name")).appendTo("#SelCity");
		});
	}

});
凤飞飞

夕阳下炸了的芋头(ง •̀_•́)ง

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简化xml的三级联动

笔记：简化版&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l
复制链接

扫一扫

专栏目录