jquery实现select二级联动

jquery实现一个简单的select二级联动菜单，代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 二级联动</title>
    <style>
        .city{
            display: none;;
        }
        .city_first {
            display: block;
        }
    </style>
    <script src="jquery/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#province").change(function(){
                var index = $(this).get(0).selectedIndex;
                $('.city').hide().eq(index).show();
            });
        });
    </script>
</head>
<body>
<select id="province">
    <option>----请选择省份----</option>
    <option>北京</option>
    <option>上海</option>
    <option>江苏</option>
</select>
<select class="city city_first">
    <option>----请选择城市----</option>
</select>

<select class="city">
    <option>----请选择城市----</option>
    <option>东城</option>
    <option>西城</option>
    <option>崇文</option>
    <option>宣武</option>
    <option>朝阳</option>
</select>
<select class="city">
    <option>----请选择城市----</option>
    <option>黄浦</option>
    <option>卢湾</option>
    <option>徐汇</option>
    <option>长宁</option>
    <option>静安</option>
</select>
<select class="city">
    <option>----请选择城市----</option>
    <option>南京</option>
    <option>镇江</option>
    <option>苏州</option>
    <option>南通</option>
    <option>扬州</option>
</select>
</body>
</html>

出处：www.l1mn.com

原文标题：jquery实现select二级联动

原文地址：https://www.l1mn.com/p/jquery-select.html

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

jquery实现select二级联动

提示

提示