jquery实现二级联动

这两天一直在看jquery实现二级联动于是自己结合网上的编写了一个小demo
代码如下:首先引入jquery
其次编写页面:

 <body>
    <select id="checkE">
        <option value="">请选择种类</option>
    </select>
    <select id="checkFood">
        <option>请选择食物</option>
    </select>
</body>

然后编写js

<script type="application/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="application/javascript">
    $(function(){
        //页面加载完毕后开始执行的事件
        var checkE='{"水果":["苹果","香蕉","橘子"],"蔬菜":["白菜","豆芽","土豆"]}';
        var kind=eval('('+checkE+')');//计算某个字符串,并执行其中的的 JavaScript 代码
        for (var key in kind)
        {
            $("#checkE").append("<option value='"+key+"'>"+key+"</option>");
        }
        $("#checkE").change(function(){
            var checkEval=$(this).val();
            $("#checkFood").html('<option value="">请选择食物</option>');
            for(var k in kind[checkEval])
            {
                var now_food=kind[checkEval][k];
                $("#checkFood").append('<option value="'+now_food+'">'+now_food+'</option>');
            }
        });
    });
</script>

猜你喜欢

转载自blog.csdn.net/csdn_myprogramLife/article/details/82917777
今日推荐