jQuery使用Javascript Object Literal根据另一个下拉选项填充下拉选项 [英] jQuery populate drop-down options based on another drop-down option using Javascript Object Literal

问题描述

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

I am building up a selection list for users based on the year and make (manufacturer) of the car they choose. Instead of building up all select and options and then showing and hiding them, I would only like to populate the select box and options with the javascript object literal that correlates with the vehicle manufacturer. I.E. if they choose this manufacturer then populate the next dropdown with these vehicles and on change, replace those to match to the new manufacturer that has been changed.

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

Here's what I have so far:

一个选择框:

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

这是用对象文字填充的:

That is populated in an object literal:

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

It is working as needed and I have an additional one to populate the other dropdowns. But as mentioned above, I would like an on change function to handle the populating of one select box instead of having to show and hide each one.

我尝试了这个，但一切都破了:

I tried this but it broke everything:

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

如果有人有任何想法，请告诉我.这是一个实用的小提琴:

If anyone has any ideas please let me know. Here is a functional fiddle:

DAS字段

推荐答案

小提琴出现问题:

1. 您有很多$(document).ready()函数，但是只需要一个-在代码的顶部.
2. 您应该在代码顶部定义变量modelMakeJsonList，modelTypeHondaJsonList和modelTypeFordJsonList，以便文档的其余部分可以使用它们.
3. 代替声明3个版本的listItems变量，而是针对每个select框设置3个版本. -例如ModelListItems，HondaListItems和FordListItems之类的东西.
4. 在您尝试实现的jQuery中，$(this).val()正在获取ID号，而不是品牌名称.要获取名称，您应该执行类似$('#makeSelectionBox option:selected').text()'的操作.这样会在makeSelectionBox的选定选项中获取文本.

1. You have many $(document).ready() functions, but you only need one - at the top of your code.
2. You should define your variables modelMakeJsonList, modelTypeHondaJsonList and modelTypeFordJsonList at the top of your code so that the rest of the document can use them.
3. Instead of declaring 3 versions of the listItems variable, make 3 versions - specific to each select box. - like ModelListItems, HondaListItems and FordListItems or something.
4. In the jQuery you are trying to implement, $(this).val() is getting the ID number, not the make names. To get the names, you should do something like $('#makeSelectionBox option:selected').text()'. This gets the text in the selected option of your makeSelectionBox.

如果以这种方式进行操作，则要添加的jQuery可能看起来像这样:

If you do it this way, the jQuery you want to add can look something like this:

$("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的制作方式与您之前使用的一样.假设您要在最终设计中包括这些选择框.这是一个小提琴:单击此处.

The variables HondaListItems and FordListItems are made like you have them earlier. This is assuming you want to include those selection boxes in your final design. Here is a fiddle: Click here.

但是，这是对代码的重构，可能很有用:

However, here is a refactoring of your code that may be useful:

首先，您可以将json模型类型的列表简化为:

First, you can simplify your list of json model types to this:

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

这提供了一种很好的简便方法，可以使用以下功能添加所有选项:

This provides a nice easy way to add all options with a function like this:

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调用可能看起来像这样:

And if you implement both of these, your new jQuery call can look just like this:

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

以下是该重构的有效提要:单击此处.

Here is a working fiddle for this refactor: Click Here.

看起来很干净.让我知道您是否正在寻找其他东西或有任何疑问！

Which looks pretty clean. Let me know if you are looking for something else or have any questions!

这篇关于jQuery使用Javascript Object Literal根据另一个下拉选项填充下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！