前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML五级下拉联动菜单

HTML五级下拉联动菜单

作者头像
张泽旭
发布2018-12-10 16:44:26
3.4K0
发布2018-12-10 16:44:26
举报
文章被收录于专栏:张泽旭的专栏

HTML五级下拉联动菜单

做网页的菜单联动网上的看起来很负责,可以直接看着个,懂点jQuery就可以。 这个代码简单,而且在上一篇 android下拉五级菜单联动的博文中的理论思想已经讲的很详细的了,不知道可以查看,下来直接看代码

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>>
        <title></title>
        <script>
            var str = {
                "爱立信$$BBU$$DUS4102": "KDU137624/11$$",
				"华为$$RRU$$RRU3959$$WD5MIRUYC10E": "基带板$$",
				"factory": "华为$$爱立信$$",
				"华为": "BBU$$RRU$$",
				"爱立信$$BBU$$DUS4102$$KDU137624/11": "基带板$$",
				"华为$$BBU": "UMPTb2$$",
				"华为$$RRU": "RRU3775$$RRU3959$$",
                "华为$$RRU$$RRU3959": "WD5MIRUYC10E$$",
				"华为$$BBU$$UMPTb2": "WD22UMPTb2$$",
                "华为$$RRU$$RRU3775$$D5MPRUC19BC": "电源模块$$",
                "result": "ok",
                "华为$$BBU$$UMPTb2$$WD22UMPTb2": "射频单元$$",
                "华为$$RRU$$RRU3775": "D5MPRUC19BC$$",
				"爱立信$$BBU": "DUS4102$$",
				"爱立信$$RRU": "RRUS01B1$$",
				"爱立信$$RRU$$RRUS01B1": "KRC161255/2$$",
                "爱立信$$RRU$$RRUS01B1$$KRC161255/2": "电源模块$$",
                "爱立信": "BBU$$RRU$$"
            };
            function getLevel() {
                $("#level1 option[value='请选择']").remove();
                $("#level1 option[value='']").remove();
                $("#level2 option[value='']").remove();
                $("#level3 option[value='']").remove();
                $("#level4 option[value='']").remove();
                $("#level5 option[value='']").remove();
                var checkText = $("#level1").find("option:selected").text();
                $("#level2").empty();
                var type = str[checkText].split("$$");
                for(var i = 0; i < type.length; i++) {
                    $("#level2").append("<option value='" + type[i] + "'>" + type[i]);
                }
                changeLevel_2();
            }
            function changeLevel_2() {
                var checkText = $("#level1").find("option:selected").text();
                var checkText2 = $("#level2").find("option:selected").text();
                $("#level3").empty();

                var products_name = str[checkText + "$$" + checkText2].split("$$");
                for(var i = 0; i < products_name.length; i++) {
                    $("#level3").append("<option value='" + products_name[i] + "'>" + products_name[i]);
                }
                changeLevel_3();
            }
            function changeLevel_3() {
                var checkText = $("#level1").find("option:selected").text();
                var checkText2 = $("#level2").find("option:selected").text();
                var checkText3 = $("#level3").find("option:selected").text();
                $("#level4").empty();

                var products_no = str[checkText + "$$" + checkText2 + "$$" + checkText3].split("$$");
                for(var i = 0; i < products_no.length; i++) {
                    $("#level4").append("<option value='" + products_no[i] + "'>" + products_no[i]);
                }
                changeLevel_4();
            }

            function changeLevel_4() {
                var checkText = $("#level1").find("option:selected").text();
                var checkText2 = $("#level2").find("option:selected").text();
                var checkText3 = $("#level3").find("option:selected").text();
                var checkText4 = $("#level4").find("option:selected").text();
                $("#level5").empty();
                var function_1 = str[checkText + "$$" + checkText2 + "$$" + checkText3].split("$$");
                for(var i = 0; i < function_1.length; i++) {
                    $("#level5").append("<option value='" + function_1[i] + "'>" + function_1[i]);
                }
                $("#level2 option[value='']").remove();
                $("#level3 option[value='']").remove();
                $("#level4 option[value='']").remove();
                $("#level5 option[value='']").remove();
            }
        </script>
    </head>
    <body>
        <strong><span style="font-size:18px;">              
                    <tr>  
                    <td>类别</td>  
                    <td>  
                        <select name="level1" id="level1" onchange="getLevel()" style="width:100px;">  


                        </select>  
                        <select name="level2" id="level2" onchange="changeLevel_2()" style="width:100px;">
                             <option value="all" selected>请选择 
                        </select>  
                        <select name="level3" id="level3" onchange="changeLevel_3()" style="width:100px;">
                             <option value="all" selected>请选择
                        </select> 
                        <select name="level4" id="level4" onchange="changeLevel_4()" style="width:100px;">
                             <option value="all" selected>请选择  
                        </select>
                         <select name="level5" id="level5"  style="width:100px;"> 
                             <option value="all" selected>请选择
                        </select>
                    </td>  
                  </tr></span></strong>

    </body>
    <script>
        $("#level1").empty();

        $("#level1").append("<option value='请选择'>请选择");

        var factory = str.factory.split("$$");
        for(var i = 0; i < factory.length; i++) {
            $("#level1").append("<option value='" + factory[i] + "'>" + factory[i]);
        }
        $("#level1 option[value='']").remove();
    </script>
</html>

代码中用到了jQuery,记得添加后可直接查看运行效果

CSDN android下拉五级菜单联动这里写链接内容

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年10月18日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML五级下拉联动菜单
  • CSDN android下拉五级菜单联动这里写链接内容
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档