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

它正在按需工作,我还有一个填充其他下拉菜单.但是如上所述,我想要一个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

小提琴的问题:

1. 你有很多$(document).ready()功能,但你只需要一个 - 在代码的顶部.
2. 您应该定义变量modelMakeJsonList,modelTypeHondaJsonList并modelTypeFordJsonList在代码的顶部,以便文档的其余部分可以使用它们.
3. 而不是声明3个版本的listItems变量,而是制作3个版本 - 特定于每个select框.- 喜欢ModelListItems,HondaListItems等等FordListItems.
4. 在您尝试实现的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由像你有他们前面.这假设您希望在最终设计中包含这些选择框.这是一个小提琴:点击这里.

编辑:

但是,这里是您的代码的重构,可能是有用的:

首先,您可以将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);
});

这是这个重构的工作小提琴:点击这里.

看起来很干净.如果您正在寻找其他内容或有任何疑问,请告诉我们!