javascript - jQuery 使用 Javascript Object Literal 根据另一个下拉选项填充下拉选项

Question

我正在根据用户选择的汽车的年份和制造商(制造商)为用户建立一个选择列表。我不想构建所有选择和选项然后显示和隐藏它们，我只想使用与车辆制造商相关的 javascript 对象文字填充选择框和选项。 IE。如果他们选择该制造商，则使用这些车辆填充下一个下拉列表，并在更改时替换这些车辆以匹配已更改的新制造商。

这是我目前所拥有的:

一个选择框:

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

它正在根据需要工作，我还有一个额外的用于填充其他下拉菜单。但如上所述，我想要一个更改功能来处理一个选择框的填充，而不是必须显示和隐藏每个选择框。

我试过了，但它破坏了一切:

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

如果有人有任何想法，请告诉我。这是一个功能性的 fiddle :

DAS FIDDLE

Answer 1

你的 fiddle 有问题:

1. 您有许多 $(document).ready() 函数，但您只需要一个 - 在您的代码顶部。
2. 您应该在代码顶部定义变量 modelMakeJsonList、modelTypeHondaJsonList 和 modelTypeFordJsonList，以便文档的其余部分可以使用它们.
3. 不是声明 3 个版本的 listItems 变量，而是制作 3 个版本 - 特定于每个 select 框。 - 像 ModelListItems、HondaListItems 和 FordListItems 之类的东西。
4. 在您尝试实现的 jQuery 中，$(this).val() 正在获取 ID 号，而不是名称。要获取名称，您应该执行类似 $('#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 就像您之前拥有的一样。这是假设您要在最终设计中包含这些选择框。这是一个 fiddle :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);
});

这里是这个重构的工作 fiddle :Click Here .

看起来很干净。如果您正在寻找其他东西或有任何疑问，请告诉我!