jquery省份二级菜单联动

最新推荐文章于 2021-08-05 19:20:55 发布

蔡馨

最新推荐文章于 2021-08-05 19:20:55 发布

阅读量532

点赞数

分类专栏： web前端学习

web前端学习专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的二级联动下拉菜单示例，当用户选择省份时，相应的城市选项会动态显示。此功能常见于地址选择场景，提高了用户体验。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <title>二级联动</title>
    <script src="public/js/jquery1.42.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //触发select的改变事件
            $("#province").change(function(){
                //遍历#province下的option
                $("#province option").each(function(i,o){
                    //设置选中功能
                    if($(this).attr("selected"))
                    {
                        $(".city").hide();
                        $(".city").eq(i).show();
                    }
                });
            });
            $("#province").change();
        });
    </script>
</head>
<body>
    <select id="province">
        <option>----请选择省份----</option>
        <option>北京</option>
        <option>上海</option>
        <option>江苏</option>
    </select>
    <select class="city">
        <option>----请选择城市----</option>
    </select>
    <select class="city">
        <option>东城</option>
        <option>西城</option>
        <option>崇文</option>
        <option>宣武</option>
        <option>朝阳</option>
    </select>
    <select class="city">
        <option>黄浦</option>
        <option>卢湾</option>
        <option>徐汇</option>
        <option>长宁</option>
        <option>静安</option>
    </select>
    <select class="city">
        <option>南京</option>
        <option>镇江</option>
        <option>苏州</option>
        <option>南通</option>
        <option>扬州</option>
    </select>


</body>
</html>