地区三级联动--省份province
Posted SYsunyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地区三级联动--省份province相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地区三级联动</title> <script src="./jquery.js"></script> </head> <body> <h2>地区三级联动</h2> 省份： <select name="" id="province" > <option value="0">-请选择-</option> </select> 城市： <select name="" id="city"> <option value="0">-请选择-</option> </select> 地区： <select name="" id="area"> <option value="0">-请选择-</option> </select> </body> <!-- 将省份的信息显示给下拉列表 ①ajax去服务器把xml的地区信息都请求回来 ②从中筛选"省份"信息并显示 --> <script type="text/javascript"> function show_province(){ //①ajax去服务器把xml的地区信息都请求回来 $.get(‘./ChinaArea.xml‘,function(msg){ //alert(msg);//ajax请求返回的是xml格式的文档对象 //对服务器返回的xml信息进行分析处理 /** * 需要在 XMLDocument节点里获得province 元素节点 * province是XMLDocuemnt 的子节点 * 从父节点中获取内部的子节点$(父节点).find(子节点选择器)方法 */ //console.log($(msg).find(‘province‘));//此时已获取所有省份的信息 $(msg).find(‘province‘).each(function(k,v){ //console.log($(this));//this分别依次代表每个province的dom对象 //获取省份的名称并显示给下拉列表 var nm = $(this).attr(‘province‘);//获取jquery对象的属性 var id = $(this).attr(‘provinceID‘); // console.log(nm); // 给select框"追加"省份名称 $(‘#province‘).append("<option value="+id+">"+nm+"</option>"); }); },‘xml‘); } $(function(){//必须事件加载，所有的数据加载好，再调用show_province()函数 show_province(); }); </script> </html>
以上是关于地区三级联动--省份province的主要内容，如果未能解决你的问题，请参考以下文章