基于现有代码扩展的三级联动下拉菜单两类故障求助

问题梳理 #

• 无论选择哪个state或store，第三级organiser下拉菜单始终显示相同选项
• 切换state时，organiser下拉菜单不会重置为默认的“Select the organiser”

问题原因及修复步骤 #

1. 中文引号导致DOM选择失败
   代码里的$(“.subcat”)和$(“.organiser”)用了中文引号，jQuery无法正确匹配元素，导致organiser的筛选逻辑完全没生效。把所有中文引号替换成英文引号即可。

2. state切换时未重置organiser
   当前state的change事件只处理了store下拉的重置，没有同步处理organiser。需要在state变更时，给organiser也加上重置逻辑：清空选中值、隐藏所有选项、禁用控件。

3. （可选）补充其他store对应的organiser选项
   目前organiser里只有ma_store_1的选项，其他store选中后没有对应内容，可根据需求添加更多org="对应store值"的option。

修复后完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>

<body>
        <style type="text/css">
            .subcat option {
                display: none;
            }
            .subcat option.label {
                display: inline;
            }
            .organiser option {
                display: none;
            }
        </style>
<script> 
            function goToNewPage()
          {
            var url = document.getElementById('organiser').value;
            console.log(url);
            if(url != 'none') {
              window.location = url;
            }
          }
          </script>
<script type="text/javascript">
$(function(){
    
    var $cat = $("#state"),
        $subcat = $(".subcat"),
        $organiser = $(".organiser");
    
    $cat.on("change",function(){
        var _rel = $(this).val();
        // 重置store
        $subcat.find("option").attr("style","").hide();
        $subcat.val("");
        // 重置organiser
        $organiser.find("option").attr("style","").hide();
        $organiser.val("");
        $organiser.prop("disabled",true);
        
        if(!_rel) {
            $subcat.prop("disabled",true);
            return;
        }
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
    });
    
    $subcat.on("change",function(){ 
        var _org = $(this).val(); 
        $organiser.find("option").attr("style","").hide(); 
        $organiser.val(""); 
        if(!_org) {
            $organiser.prop("disabled",true);
            return;
        }
        $organiser.find("[org="+_org+"]").show();
        $organiser.prop("disabled",false); 
    });
            
});
</script>
<form id="formname" name="Sate-Store">
    
                    <select name="state" id="state">
                        <option value="">Select state</option>
                        <option value="ma">MA</option>
                        <option value="me">ME</option>
                        <option value="nh">NH</option>
                    </select>
                    <select disabled="disabled" class="subcat" id="store" name="store">
                        <option value>Select a store</option>
                        <!-- MA -->
                        <option rel="ma" value="ma_store_1">MA Store 1</option>
            <option rel="ma" value="ma_store_2">MA Store 2</option>
                        <option rel="ma" value="ma_store_3">MA Store 3</option>
                        <option rel="ma" value="ma_store_4">MA Store 4</option>
                        <option rel="ma" value="ma_store_5">MA Store 5</option>
                        <!-- ME -->
                        <option rel="me" value="me_store_1">ME Store 1</option>
                        <option rel="me" value="me_store_2">ME Store 2</option>
                        <option rel="me" value="me_store_3">ME Store 3</option>
                        <option rel="me" value="me_store_4">ME Store 4</option>
                        <option rel="me" value="me_store_5">ME Store 5</option>
                        <!-- NH -->
                        <option rel="nh" value="nh_store_1">NH Store 1</option>
                        <option rel="nh" value="nh_store_2">NH Store 2</option>
                        <option rel="nh" value="nh_store_3">NH Store 3</option>
                        <option rel="nh" value="nh_store_4">NH Store 4</option>
                        <option rel="nh" value="nh_store_5">NH Store 5</option>
                    </select>
                                        <select disabled="disabled" class="organiser" id="organiser" name="organiser">
                                            <option value>Select the organiser</option>
                                            <!-- MA Store 1 -->
                                            <option org="ma_store_1" value="https://test.com/">Jack</option>
                                            <option org="ma_store_1" value="James">James</option>
                                            <option org="ma_store_1" value="Frank">Frank</option>
                                            <!-- MA Store 2 示例 -->
                                            <option org="ma_store_2" value="https://example.com/">Alice</option>
                                            <!-- ME Store 1 示例 -->
                                            <option org="me_store_1" value="Bob">Bob</option>
                                        </select>

          <input type=button value="Go" onclick="goToNewPage()" />

    </form>

</body>
</html>

额外说明 #

• 给organiser也加了默认隐藏所有option的CSS，和store保持一致的样式逻辑
• 修正了原代码中MA Store 2的value错误（原先是外部链接，改成了store标识），方便关联organiser
• 补充了几个不同store对应的organiser示例选项，测试时可以看到不同store对应不同选项

内容的提问来源于stack exchange，提问作者FlyBoy