JQuery实现：基于动态下拉框选择展示对应DIV内容

我看了你的代码，主要问题出在事件绑定时机和选项值判断逻辑上，还有一些小的语法、大小写匹配问题。下面是修复后的完整代码，以及具体的修改说明：

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style>
        .box{ display: none; }
        .Honda1{ background: #ff0000; }
        .Honda2{ background: #00ff00; }
        .Honda3{ background: #0000ff; }
        .Honda4{background: #ffffff;}
        .Ford1{ background: #ff9900; }
        /* 可按需添加其他型号样式 */
    </style>
</head>
<body>
    <form>
        <select id="makeSelectionBox" class="stringInfoSpacing">
            <option value="-1" selected="selected">Make</option>
        </select>
        <select id="modelSelectionBox" class="stringInfoSpacing">
            <option value="-1" selected="selected">Vehicle</option>
        </select>
    </form>
    <div class="Honda1 box">You have selected <strong>Honda1 option</strong> so i am here</div>
    <div class="Honda2 box">You have selected <strong>Honda2 option</strong> so i am here</div>
    <div class="Honda3 box">You have selected <strong>Honda3 option</strong> so i am here</div>
    <div class="Honda4 box">You have selected <strong>Honda4 option</strong> so i am here</div>
    <div class="Ford1 box">You have selected <strong>Ford1 option</strong> so i am here</div>
    <!-- 可按需添加其他型号对应的DIV -->

    <script>
        $( document ).ready(function() { 
            var modelMakeJsonList = {
                "modelMakeTable" : [ 
                    {"modelMakeID" : "1","modelMake" : "Honda"}, 
                    {"modelMakeID" : "2","modelMake" : "Ford"}, 
                    {"modelMakeID" : "3","modelMake" : "Chevy"}, 
                    {"modelMakeID" : "4","modelMake" : "Nissan"}, 
                    {"modelMakeID" : "5","modelMake" : "Toyota"} 
                ]
            }; 
            var modelTypeJsonList = {
                "Honda" : [ 
                    {"modelTypeID" : "1","modelType" : "Honda1"}, 
                    {"modelTypeID" : "2","modelType" : "Honda2"}, 
                    {"modelTypeID" : "3","modelType" : "Honda3"}, 
                    {"modelTypeID" : "4","modelType" : "Honda4"}, 
                    {"modelTypeID" : "5","modelType" : "Honda5"}, 
                    {"modelTypeID" : "6","modelType" : "Honda6"} 
                ], 
                "Ford" : [ 
                    {"modelTypeID" : "1","modelType" : "Ford1"}, 
                    {"modelTypeID" : "2","modelType" : "Ford2"}, 
                    {"modelTypeID" : "3","modelType" : "Ford3"}, 
                    {"modelTypeID" : "4","modelType" : "Ford4"}, 
                    {"modelTypeID" : "5","modelType" : "Ford5"}, 
                    {"modelTypeID" : "6","modelType" : "Ford6"} 
                ], 
                "Chevy" : [ 
                    {"modelTypeID" : "1","modelType" : "Chevy1"}, 
                    {"modelTypeID" : "2","modelType" : "Chevy2"}, 
                    {"modelTypeID" : "3","modelType" : "Chevy3"}, 
                    {"modelTypeID" : "4","modelType" : "Chevy4"}, 
                    {"modelTypeID" : "5","modelType" : "Chevy5"}, 
                    {"modelTypeID" : "6","modelType" : "Chevy6"} 
                ]
            }; 

            console.log( "ready!" ); 

            // 填充品牌下拉框
            var ModelListItems= ""; 
            for (var i = 0; i < modelMakeJsonList.modelMakeTable.length; i++){ 
                ModelListItems+= "<option value='" + modelMakeJsonList.modelMakeTable[i].modelMake + "'>" + modelMakeJsonList.modelMakeTable[i].modelMake + "</option>"; 
            } 
            $("#makeSelectionBox").append(ModelListItems); 

            // 更新型号下拉框的函数
            var updateSelectVehicleBox = function(make) { 
                console.log('updating with',make); 
                // 重置型号下拉框为默认提示
                $("#modelSelectionBox").html('<option value="-1" selected="selected">Vehicle</option>');
                // 仅当选择有效品牌时填充型号
                if (make !== "-1" && modelTypeJsonList[make]) {
                    var listItems= ""; 
                    for (var i = 0; i < modelTypeJsonList[make].length; i++){ 
                        // 将型号名称设为option的value，方便后续匹配DIV类名
                        listItems+= "<option value='" + modelTypeJsonList[make][i].modelType + "'>" + modelTypeJsonList[make][i].modelType + "</option>"; 
                    } 
                    $("#modelSelectionBox").append(listItems); 
                }
                // 切换品牌时隐藏所有内容DIV
                $(".box").hide();
            } 

            // 品牌下拉框切换事件
            $("#makeSelectionBox").on('change',function(){ 
                var selectedMake = $(this).val(); 
                updateSelectVehicleBox(selectedMake); 
            }); 

            // 型号下拉框切换事件（控制DIV显示的核心逻辑）
            $("#modelSelectionBox").on('change',function(){ 
                var selectedModel = $(this).val(); 
                if (selectedModel !== "-1") {
                    $(".box").hide(); 
                    $("." + selectedModel).show(); 
                } else {
                    // 选择默认提示时隐藏所有DIV
                    $(".box").hide();
                }
            }); 
        }); 
    </script>
</body>
</html>

具体修改说明 #

1. 修正事件绑定逻辑：
   原来你把显示DIV的逻辑写在了品牌下拉框的change事件里，这不符合需求——应该是选择型号后才触发DIV显示，所以单独给modelSelectionBox绑定了change事件。

2. 调整下拉框value值：

   • 品牌下拉框的value从modelMakeID改成了品牌名称（如"Honda"），直接用val()就能拿到品牌名，不用额外取text()，逻辑更简洁。
   • 型号下拉框的value改成了型号名称（如"Honda1"），这样选择后直接用value匹配对应DIV的类名，不用写一堆冗余的if判断，扩展性更强。

3. 修复语法与匹配问题：

   • 移除了JSON对象末尾多余的逗号，避免旧浏览器出现语法错误。
   • 统一了类名大小写（比如原来的.honda2和DIV的.Honda2不匹配），确保样式和选择器能正确对应。

4. 增强鲁棒性：

   • 在updateSelectVehicleBox中增加判断，若选择默认提示或无对应品牌数据，就不填充型号选项，避免报错。
   • 切换品牌时自动隐藏所有DIV，避免残留之前的显示内容。

这样修改后，就能实现你想要的完整流程：选择品牌→加载对应型号→选择型号→显示对应DIV内容。

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