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

最新推荐文章于 2019-07-13 19:29:06 发布

原创最新推荐文章于 2019-07-13 19:29:06 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery

java 专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了如何利用jQuery和Ajax技术实现在网页中两个或多个下拉选择框之间的联动效果，通过监听第一个下拉框的改变事件，发送Ajax请求获取并更新第二个下拉框的数据，实现动态加载和数据关联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 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>