从JSON自动填充选择框 [英] Auto Populate select boxes from JSON
本文介绍了从JSON自动填充选择框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前有以下一段jQuery，它一直在工作，直到我需要向JSON添加3个额外的字段列。我基本上希望html选择下拉菜单取决于上一个下拉菜单中的数据。也正如你将看到我的jquery只显示2下拉列表有一种方法将其扩展到第3和第4以匹配JSON数据？提前谢谢了。
I currently have the following piece of jQuery which was working until I need to add 3 additional field columns to the JSON. I basically want the html select drop downs to change depending on the data from the previous drop down. Also as you will see my jquery only shows 2 dropdowns is there a way to extend it to a 3rd and 4th to match the JSON data? Many thanks in advance.
以下是我的测试数据：
Here is my test data:
var makesModels = {
"Audi":{
"50": {
"50 L(1974-1978)": ["Alternators", "Starter Motors"],
"50GL(1974-1978)": ["Alternators", "Starter Motors"] },
"A1": {
"A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
}
},
"Audi2":{
"50": {
"50 L(1974-1978)": ["Alternators", "Starter Motors"],
"50GL(1974-1978)": ["Alternators", "Starter Motors"] },
"A1": {
"A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
}
},
"Audi3":{
"50": {
"50 L(1974-1978)": ["Alternators", "Starter Motors"],
"50GL(1974-1978)": ["Alternators", "Starter Motors"] },
"A1": {
"A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
}
}
}
jQuery：
The jQuery:
function load_search()
{
// Populate Makes
jsonData = undefined;
$.getJSON(makesModels, function (json) {
jsonData = json;
for (var make in jsonData) {
var option = '<option value="' + make + '">' + make + '</option>';
$("#make").append(option);
}
// Populate Models
$("#make").on("change", function () {
var selectedOption = $('#make option:selected').val();
if (selectedOption !== "") {
$("#model").html('<option value=""> -- select -- </option>');
var make = $(this).val(),
models = jsonData[make];
for (i = 0; i < models.length; i++) {
var option = '<option value="' + models[i] + '">' + models[i] + '</option>';
$("#model").append(option);
}
$("#model").prop("disabled", false);
} else {
$("#model").html('<option value=""> -- select -- </option>').prop("disabled", true);
}
});
});
}
$(function () {
load_search();
});
The Html：
<fieldset>
<div class="item">
<label>Make</label>
<select id="make">
<option value="">-- Make --</option>
</select>
</div>
<div class="item">
<label>Model</label>
<select id="model">
<option value="">-- Model --</option>
</select>
</div>
<div class="item">
<label for="">Model</label>
<select id="engine">
<option value="">-- Engine --</option>
</select>
</div>
<div class="item">
<label for="">Parts</label>
<select id="parts">
<option value="">-- Parts --</option>
</select>
</div>
</fieldset>
推荐答案
JavaScript中有几个问题。首先！==不等于，它是！=没有额外的等号。你也不能算一个javascript对象。你为我; i ++循环不会运行，因为您没有循环遍历数组中的值，为此，您需要坚持如何编写第一个循环var（x in y）。
There are a couple of issues in your javascript. First !== is not equals, it is != without the extra equals sign. Also you can't count a javascript object. Your for i; i++ loop won't run because you aren't looping over values in an array, to do this you need to stick to how you wrote the first loop var(x in y).
以下是 JsFiddle 中的工作版本。如果您可以将服务器调用修改得更加统一，比如拥有所有数组或所有对象，这可能会有所帮助。
Here is a working version in JsFiddle. If you can modify the server call to be more uniform, like having all arrays or all objects, that might help.
Javascript：
Javascript:
$(document).ready(function()
{
var makesModels = {
"Audi":{
"50": {
"50 L(1974-1978)": ["Alternators", "Starter Motors"],
"50GL(1974-1978)": ["Alternators", "Starter Motors"] },
"A1": {
"A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
}
},
"Audi2":{
"50": {
"50 L(1974-1978)": ["Alternators", "Starter Motors"],
"50GL(1974-1978)": ["Alternators", "Starter Motors"] },
"A1": {
"A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
}
},
"Audi3":{
"50": {
"50 L(1974-1978)": ["Alternators", "Starter Motors"],
"50GL(1974-1978)": ["Alternators", "Starter Motors"] },
"A1": {
"A1 1.2TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 1.4TFSI(2010-)": ["Alternators", "Starter Motors"],
"A1 Sportback 2.0 TDI(2011-)":["Alternators","Starter Motors"]
}
}
}
function populatecascadingdropdown(makesModels)
{
var jsonData = makesModels;
for (var make in jsonData) {
var option = '<option value="' + make + '">' + make + '</option>';
$("#make").append(option);
}
// Populate Models
$("#make").on("change", function () {
var selectedOption = $('#make option:selected').val();
if (selectedOption != "") {
$("#model").html('<option value=""> -- select -- </option>');
var make = $(this).val(),
models = jsonData[make];
for (car in models) {
var option = '<option value="' + car + '">' + car + '</option>';
$("#model").append(option);
}
$("#model").prop("disabled", false);
} else {
$("#model").html('<option value=""> -- select model-- </option>').prop("disabled", true);
}
});
$("#model").on("change", function () {
var selectedOption = $('#make option:selected').val();
if (selectedOption != "") {
$("#engine").html('<option value=""> -- select engine -- </option>');
var model = $(this).val();
var models = jsonData[make];
var engines = models[model];
for (ngin in engines) {
var option = '<option value="' + ngin + '">' + ngin + '</option>';
$("#engine").append(option);
}
$("#model").prop("disabled", false);
} else {
$("#model").html('<option value=""> -- select -- </option>').prop("disabled", true);
}
});
$("#engine").on("change", function () {
var selectedOption = $('#make option:selected').val();
var selectedModel = $('#model option:selected').val();
if (selectedOption != "") {
$("#parts").html('<option value=""> -- select part -- </option>');
var selectedengine = $(this).val();
var models = jsonData[make];
var engines = models[selectedModel];
var parts = engines[selectedengine];
for (var i = 0; i < parts.length; i++) {
var option = '<option value="' + parts[i] + '">' + parts[i] + '</option>';
$("#parts").append(option);
}
$("#parts").prop("disabled", false);
} else {
$("#parts").html('<option value=""> -- select -- </option>').prop("disabled", true);
}
});
}
populatecascadingdropdown(makesModels);
});
这篇关于从JSON自动填充选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
