欢迎来到元素模板WWW.YS720.COM,本站提供专业的织梦模板网站模板ASPCMS模板
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

jquery+ajax实现多个select下拉选之间的关联

(元素模板) / 2019-09-11 14:30
如何让2个select 之间有关联?元素模板为您解答

下面HTML文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
       <option value="吉林省">吉林省</option>
       <option value="辽宁省">辽宁省</option>
       <option value="山东省">山东省</option>
     </select>
     <select id="city" name="city">
        <option value="">请选择.....</option>
     </select>
 
  </body> 
     <script language="JavaScript">
        $().ready(function(){
            $("#province").change(function(){
                //清空city
                $("#city option:not(:first)").remove();        
                //根据province设置city
                var prov = $(this).val();
                $.post("cities.xml",function(data){
                    var $xmlProv = $(data).find("province[name="+prov+"]");
                    var $cities = $xmlProv.find("city");
                    $cities.each(function(i,city){
                        var $opt = $("<option></option>");
                        $opt.text($(city).text());
                        $opt.appendTo($("#city"));
                    });
                },"xml");
 
            });
        })
 
     </script>
 
</html>
下面是XML 文件
<?xml version="1.0" encoding="GB2312"?>
<china>
    <province name="吉林省">
        <city>长春</city>
        <city>吉林市</city>
        <city>四平</city>
        <city>松原</city>
        <city>通化</city>
    </province>
    <province name="辽宁省">
        <city>沈阳</city>
        <city>大连</city>
        <city>鞍山</city>
        <city>抚顺</city>
        <city>铁岭</city>
    </province>
    <province name="山东省">
        <city>济南</city>
        <city>青岛</city>
        <city>威海</city>
        <city>烟台</city>
        <city>潍坊</city>
    </province>
</china>    
 

Copyright @ 2013-2019 元素模板 YS720.COM All Rights Reserved. 版权所有 元素模板 YS720.COM