登录  /  注册
博主信息
博文 61
粉丝 1
评论 0
访问量 67680
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0523-jq-三级联动菜单
我的博客
原创
910人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级菜单联动</title>
</head>
<body>
<label for="spfl">商品分类</label>
<select name="spfl" id="spfl"></select>
<label for="pinpai">商品名称</label>
<select name="pinpai" id="pinpai"></select>
<label for="xinghao">商品型号</label>
<select name="xinghao" id="xinghao"></select>

<script src="static/js/jquery-3.4.1.js"></script>
<script>
    $(function () {
        var spfl = $('#spfl');
        var pinpai = $('#pinpai');
        var xinghao = $('#xinghao');

        $.getJSON('inc/fl.json', function (data, sataus) {
            //console.log(data);
            var option = '<option value="">选择商品</option>';
            if (sataus === 'success') {

                $.each(data, function (index) {
                    console.log(data[index]);

                  option += '<option value="' +data[index].flid+ '" >  ' +data[index].flname+ '   </option>';

                });
                spfl.html(option);
            }


        });

        spfl.on('change',function () {

        $.getJSON('inc/pm.json', function (data, sataus) {
            console.log(data);
            var option = '<option value="">选择商标</option>';
            if (sataus === 'success') {
                $.each(data, function (index) {

                    if(data[index].flid===spfl.val()){
                         option += '<option value="' + data[index].pmid + '" >  ' + data[index].pmname + '   </option>';
                       // console.log(data[index].pmid);
                       // console.log(data[index].pmname);
                    }

                });
                pinpai.html(option);
            }


        });

        });

        pinpai.on('change',function () {

            $.getJSON('inc/xh.json', function (data, sataus) {
                console.log(data);
                var option = '<option value="">选择型号</option>';
                if (sataus === 'success') {
                    $.each(data, function (index) {
                       // pm.json里面的pmid的值为:dq01 , pinpai.val():上边已给每个pinpai里面的option列表赋值(见48行)
                        if(data[index].pmid===pinpai.val()){
                            console.log(pinpai.val);
                            option += '<option value="' + data[index].pmid + '" >  ' + data[index].pmname + '   </option>';
                            // console.log(data[index].pmid);
                            // console.log(data[index].pmname);
                        }

                    });
                    xinghao.html(option);
                }


            });

        });





    })




</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学