大佬教程收集整理的这篇文章主要介绍了jQuery使用Javascript Object Literal基于另一个下拉选项填充下拉选项，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这是我到目前为止所拥有的：
选择框：
@H_262_11@<label>Make</label> <SELEct id="makeSELEctionBox" class="StringInfoSpacing"> <option value="-1" SELEcted="SELEcted">Make</option> </SELEct>
这是在对象文字中填充的：
@H_262_11@var modelMakeJsonList = {"modelMakeTable" : [ {"modelMakEID" : "1","modelMake" : "Honda"},{"modelMakEID" : "2","modelMake" : "Ford"},{"modelMakEID" : "3","modelMake" : "Chevy"},{"modelMakEID" : "4","modelMake" : "Nissan"},{"modelMakEID" : "5","modelMake" : "Toyota"},]};
使用此脚本：
@H_262_11@$(document).ready(function(){ var listItems= ""; for (var i = 0; i < modelMakeJsonList.modelMakeTable.length; i++){ listItems+= "<option value='" + modelMakeJsonList.modelMakeTable[i].modelMakEID + "'>" + modelMakeJsonList.modelMakeTable[i].modelMake + "</option>"; } $("#makeSELEctionBox").html(listItems); });
它正在按需工作,我还有一个填充其他下拉菜单.但是如上所述,我想要一个on change函数来处理一个选择框的填充,而不是必须显示和隐藏每个选择框.
我尝试了这个,但它打破了一切：
@H_262_11@$(document).ready(function(){ $("SELEct#makeSELEctionBox").on('change',function(){ if($(this).val()=="Honda"){ $("SELEct#modelSELEctionBox").html(modelTypeHondaJsonList); }else if($(this).val()=="Ford"){ $("SELEct#modelSELEctionBox").html(modelTypeFordJsonList); } });
>你有很多$(document).ready()函数,但你只需要一个 – 在代码的顶部.
>您应该在代码顶部定义变量modelMakeJsonList,modelTypeHondaJsonList和modelTypeFordJsonList,以便文档的其余部分可以使用它们.
>不是声明listItems变量的3个版本,而是制作3个版本 – 特定于每个选择框. – 比如ModelListItems,HondaListItems和FordListItems之类的东西.
>在您尝试实现的jQuery中,$(this).val()获取ID号,而不是make名称.要获取名称,您应该执行类似$(‘#makeSELEctionBox选项：SELEcted’).text()’的操作.这将@L_922_26@makeSELEctionBox的选定选项中的文本.
@H_262_11@$("SELEct#makeSELEctionBox").on('change',function(){ var SELEcted = $('#makeSELEctionBox option:SELEcted').text(); if(SELEcted=="Honda"){ $("SELEct#modelSELEctionBox").html(HondaListItems); } else if(SELEcted=="Ford"){ $("SELEct#modelSELEctionBox").html(FordListItems); } });
变量HondaListItems和FordListItems就像你之前提到的那样.这假设您希望在最终设计中包含这些选择框.这是一个小提琴：Click here.
编辑：
但是,这里是您的代码重构可能有用：
首先,您可以将json模型类型列表简化为：
@H_262_11@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"},"modelType" : "Ford2"},"modelType" : "Ford3"},"modelType" : "Ford4"},"modelType" : "Ford5"},"modelType" : "Ford6"} ],"Chevy" : [ {"modelTypEID" : "1","modelType" : "Chevy1"},"modelType" : "Chevy2"},"modelType" : "Chevy3"},"modelType" : "Chevy4"},"modelType" : "Chevy5"},"modelType" : "Chevy6"} ],};
@H_262_11@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); }
@H_262_11@$("SELEct#makeSELEctionBox").on('change',function(){ var SELEctedMake = $('#makeSELEctionBox option:SELEcted').text(); updateSELEctVehicleBox(SELEctedMakE); });
这是这个重构的一个工作小提琴：Click Here.
看起来很干净.如果您正在寻找其他内容或有任何疑问,请告诉我们！
以上是大佬教程为你收集整理的jQuery使用Javascript Object Literal基于另一个下拉选项填充下拉选项全部内容，希望文章能够帮你解决jQuery使用Javascript Object Literal基于另一个下拉选项填充下拉选项所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。