首页 > 代码库 > 地区三级联动--省份province

地区三级联动--省份province

2024-10-25 16:27:02   210人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地区三级联动</title>
        <script src="http://www.mamicode.com/jquery.js"></script>
</head>
<body>
    <h2>地区三级联动</h2>
    省份：
    <select name="" id="province" >
        <option value="http://www.mamicode.com/0">-请选择-</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    城市：
    <select name="" id="city">
        <option value="http://www.mamicode.com/0">-请选择-</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    地区：
    <select name="" id="area">
        <option value="http://www.mamicode.com/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="http://www.mamicode.com/+id+">"+nm+"</option>");
             });
         },‘xml‘);
     }
     $(function(){//必须事件加载，所有的数据加载好，再调用show_province()函数
         show_province();
     });
 </script>
</html>

 

地区三级联动--省份province


联系
我们