Question

我正在根据年份为用户建立一个选择列表，并为他们选择的汽车制造（制造商）。我只想用与车辆制造商相关的javascript对象文字填充选择框和选项，而不是构建所有选择和选项，然后显示和隐藏它们。 I.E.如果他们选择这个制造商，然后使用这些车辆填充下一个下拉列表并进行更改，将其替换为与已更改的新制造商匹配。

这是我到目前为止所拥有的：

选择框：

<label>Make</label>
<select id="makeSelectionBox" class="stringInfoSpacing">
<option value="-1" selected="selected">Make</option>
</select>

它填充在对象文字中：

var modelMakeJsonList = {"modelMakeTable" : 
                    [
                    {"modelMakeID" : "1","modelMake" : "Honda"},
                    {"modelMakeID" : "2","modelMake" : "Ford"},
                    {"modelMakeID" : "3","modelMake" : "Chevy"},
                    {"modelMakeID" : "4","modelMake" : "Nissan"},
                    {"modelMakeID" : "5","modelMake" : "Toyota"},
                    ]};

使用此脚本：

 $(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函数来处理一个选择框的填充，而不是必须显示和隐藏每个选择框。

我试过了，但它打破了一切：

$(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);
    }
});

如果有任何想法，请告诉我。这是一个功能小提琴：

DAS FIDDLE

Answer 1

小提琴的问题：

您有许多$(document).ready()个功能，但只需要一个 - 位于代码顶部。
您应该在代码顶部定义变量modelMakeJsonList，modelTypeHondaJsonList和modelTypeFordJsonList，以便文档的其余部分可以使用它们。
不是声明listItems变量的3个版本，而是制作3个版本 - 特定于每个select框。 - 例如ModelListItems，HondaListItems和FordListItems或其他。
在您尝试实现的jQuery中，$(this).val()正在获取ID号，而不是make name。要获取名称，您应该执行$('#makeSelectionBox option:selected').text()'之类的操作。这会在makeSelectionBox。

如果你这样做，你想要添加的jQuery看起来像这样：

$("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模型类型列表简化为：

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"} ], };

这提供了一个很简单的方法来添加所有选项，如下所示：

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); }

如果你实现了这两个，你的新jQuery调用看起来就像这样：

$("select#makeSelectionBox").on('change',function(){ var selectedMake = $('#makeSelectionBox option:selected').text(); updateSelectVehicleBox(selectedMake); });

这是这个重构的工作小提琴：Click Here。

看起来很干净。如果您正在寻找其他内容或有任何问题，请告诉我们！

jQuery使用Javascript Object Literal基于另一个下拉选项填充下拉选项

1 个答案: