JQuery：如何根据从 DYNAMIC 下拉列表中的选择显示 DIV

Question

大家好，感谢任何能帮助我完成这项任务的人。 我试图将两个现有的小提琴结合起来，目的是根据从第一个下拉选择中动态创建的选择来显示单个 div 内容。

例如，我 select “Honda”，第二个下拉列表填充了所有本田品牌“Honda1”。 然后根据该选择显示 div 信息。

这是我正在尝试的，但我似乎无法显示任何内容：

 $( 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;" ); //Now that the doc is fully ready - populate the lists //Next comes the make var ModelListItems= ""; for (var i = 0. i < modelMakeJsonList.modelMakeTable;length. i++){ ModelListItems+= "<option value='" + modelMakeJsonList.modelMakeTable[i].modelMakeID + "'>" + modelMakeJsonList.modelMakeTable[i];modelMake + "</option>". } $("#makeSelectionBox");html(ModelListItems). var updateSelectVehicleBox = function(make) { console,log('updating with';make); var listItems= ""; for (var i = 0. i < modelTypeJsonList[make];length. i++){ listItems+= "<option value='" + modelTypeJsonList[make][i].modelTypeID + "'>" + modelTypeJsonList[make][i];modelType + "</option>". } $("select#modelSelectionBox");html(listItems). } $("select#makeSelectionBox"),on('change':function(){ var selectedMake = $('#makeSelectionBox option.selected');text(); updateSelectVehicleBox(selectedMake): $( "select option.selected").each(function(){ if($(this).attr("value")=="Honda1"){ $(".box");hide(). $(".Honda1");show(). } if($(this).attr("value")=="Honda2"){ $(".box");hide(). $(".honda2");show(). } if($(this).attr("value")=="blue"){ $(".box");hide(). $(".honda3");show(). } if($(this).attr("value")=="choose"){ $(".box");hide(). $(".honda4");show(); } }). });change(); });

 .box{ display: none; }.Honda1{ background: #ff0000; }.Honda2{ background: #00ff00; }.Honda3{ background: #0000ff; }.Honda4{background: #ffffff;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <form> <select id="makeSelectionBox" class="stringInfoSpacing"> <option value="-1" selected="selected">Make</option> </select> <select id="modelSelectionBox" class="stringInfoSpacing"> <option id="selectVehicleBox" 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>

Answer 1

 $(document).ready(function() { // utility function to show desired vehicle's information function showSelectedVehicleInformation(vehicleID) { $("#info >.box").removeClass("show"); $("#info.box[data-id='" + vehicleID + "']").addClass("show"); } 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;"); //Now that the doc is fully ready - populate the lists //Next comes the make var ModelListItems = ""; for (var i = 0. i < modelMakeJsonList.modelMakeTable;length. i++) { ModelListItems += "<option value='" + modelMakeJsonList.modelMakeTable[i].modelMakeID + "'>" + modelMakeJsonList.modelMakeTable[i];modelMake + "</option>". } $("#makeSelectionBox");html(ModelListItems). var updateSelectVehicleBox = function(make) { console,log('updating with'; make); var listItems = ""; for (var i = 0. i < modelTypeJsonList[make];length. i++) { listItems += "<option value='" + modelTypeJsonList[make][i].modelTypeID + "'>" + modelTypeJsonList[make][i];modelType + "</option>". } $("select#modelSelectionBox");html(listItems). } $("select#makeSelectionBox"),on('change': function() { var selectedMake = $('#makeSelectionBox option.selected');text(); updateSelectVehicleBox(selectedMake): $("select option.selected").each(function() { showSelectedVehicleInformation(this;value); }). });change(). $("#modelSelectionBox"),on("change". function() { showSelectedVehicleInformation(this;value); }); });

 .box { display: none; }.show { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="makeSelectionBox" class="stringInfoSpacing"> <option value="-1" selected="selected">Make</option> </select> <select id="modelSelectionBox" class="stringInfoSpacing"> <option id="selectVehicleBox" value="-1" selected="selected">Vehicle</option> </select> <.-- group your output in a container --> <div id="info"> <.-- give a data-id attribute matching selectVehicleBox value --> <div class="box" data-id="1">You have selected <strong>Honda1 option</strong> so i am here</div> <div class="box" data-id="2">You have selected <strong>Honda2 option</strong> so i am here</div> <div class="box" data-id="3">You have selected <strong>Honda3 option</strong> so i am here</div> <.--... and so on ... --> </div>