jQuery+三级联动菜单

最新推荐文章于 2022-10-26 09:13:13 发布

辣姐什么鬼

最新推荐文章于 2022-10-26 09:13:13 发布

阅读量744

点赞数

分类专栏： web前端文章标签： jquery web

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--jQuery包注意要用一样的，试过2.0的发现.change不能用-->
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        var iNum;
        var iNum1;
        //存放省份
        var aProvince=["河北省","山西省","湖北省"];
        //存放市
        var aCity=[["石家庄市","张家口市","承德市"],["太原市","大同市","阳泉市"],["武汉市","孝感市","宜昌市"]];
        //存放县
        var aCountry=[[["无极县","赵县"],["尚义县","阳原县"],["平泉县","隆化县"]],[["抚宁县","卢龙县"],["清徐县","阳曲县"],["山阴县","应县"]],[["左云县","阳高县"],["孟县","平定县"],["武昌区","洪山区"]]];
        $(function(){//当页面加载时在省份菜单下加载省份数组里的内容
            for(var i=0;i<aProvince.length;i++){
                $("#selProvince").append("<option>"+aProvince[i]+"</option>")
            }
            $("#selProvince").change(function(){//当省份菜单改变时1-移除除了“请选择”之外的其他项2-得到省份菜单选择项的下标
                //3-根据得到的下标将对应省份的城市存入数组4-将得到的城市加载在城市菜单下
                $("#selCity").children().not(":eq(0)").remove();
                $("#selCountry").children().not(":eq(0)").remove();
                iNum=$(this).children("option:selected").index();
                var aaCity=aCity[iNum-1];
                for(var i=0;i<aaCity.length;i++){
                    $("#selCity").append("<option>"+aaCity[i]+"</option>")
                }
            });
            $("#selCity").change(function(){//当城市菜单改变时1-移除除了“请选择”之外的其它选项2-得到省份菜单选择项的下标和城市菜单选择项的下标
                //3-根据得到的下标将对应县城存入数组4-将得到的县加载在县菜单下
                $("#selCountry").children().not(":eq(0)").remove();
                iNum1=$(this).children("option:selected").index();
                var aaCountry=aCountry[iNum-1][iNum1-1];
                for(var i=0;i<aaCountry.length;i++){
                    $("#selCountry").append("<option>"+aaCountry[i]+"</option>")
                }
            });
        });

    </script>
</head>
<body>
<select id="selProvince">
    <option>---请选择---</option>
</select>
<select id="selCity">
    <option>---请选择---</option>
</select>
<select id="selCountry">
    <option>---请选择---</option>
</select>
</body>
</html>

辣姐什么鬼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery+三级联动菜单

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--jQuery包注意要用一样的，试过2.0的发现.change不能用--&gt; &
复制链接

扫一扫