Question

让我们明白这就是我需要达成的目标，

我需要使用json和jquery

来实现SELECT YOUR VEHICAL功能

我已经在下拉列表中显示了json数据（硬编码）。

根据年份选择，如果选择1901，则应显示汽车示例，仅显示FORD汽车选项。

请帮助实现使用json。

var a = {
            Cars: [{
                "CarType": "BMW",
                "carID": "bmw123"
            }, {
                "CarType": "mercedes",
                "carID": "merc123"
            }, {
                "CarType": "volvo",
                "carID": "vol123r"
            }, {
                "CarType": "ford",
                "carID": "ford123"
            }]
        };
        $.each(a.Cars, function (key, value) {
            $("#dropDownDest").append($('<option></option>').val(value.carID).html(value.CarType));
        });

        $('#dropDownDest').change(function () {
            alert($(this).val());
            //Code to select image based on selected car id
        });

选择的carId应该是下一个下拉列表的参数

Answer 1

这完全取决于你的json数据结构。以下是json数据模型的随机假设，以及使用与您的代码https://jsfiddle.net/571poa7c/类似的代码填充第二个下拉列表的方法。

选择“ford”父选项以查看级联工作。

$('#dropDownDest').change(function () {
            $.each(a[$(this).val()], function(key, value) {
                $('#model').append($('<option></option>').val(value.id).html(value.year + ' - ' + value.model));
            });
        });

通过使用第一个下拉选择中的键，通过json对象执行另一个循环来执行Cascade。

如果您需要更具体的帮助，我们需要查看您计划使用的完整json数据结构，以便我们可以看到数据在下拉列表之间的关联方式。

Answer 2

尝试此循环而不是$.each

a.Cars.forEach((car) => {
  $("#dropDownDest").append($('<option></option>').val(car.carID).html(car.CarType));
});

Answer 3

嗯..如果你是开放的devtools，你可以看到，在每次选择之后，它会向服务器发送请求，作为响应它将填充下一个下拉列表中的可用值，如果值只是在下一个下拉列表中设置的值。此外，对于附加数据的请求，它发送图像请求，并在服务器的答案上根据字段填写

所以，第一部分的代码看起来像是

 $('#dropDownSource').change(function () {
            $.get(....).success(function(options) {
                if (options.size() == 1) {
                     // possibly here need add this option to this dropdown and change 'disabled' to enabled
                     $('#dropDownDest').val(...your option...)
                } else {
                     $('#dropDownDest').append options...
                }
            })
        });

Answer 4

如果有人正在寻找纯粹的js方法

let Cars = [{
    "CarType": "BMW",
    "Year" : 1991,
    "carID": "bmw123"
}, {
    "CarType": "mercedes",
    "Year" : 1992,
    "carID": "merc123"
}, {
    "CarType": "volvo",
    "Year" : 1993,
    "carID": "vol123r"
}, {
    "CarType": "ford",
    "Year" : 1994,
    "carID": "ford123"
}]

let years = Cars.map((record) => {
  let option = document.createElement('option');
  let year = document.createTextNode(record["Year"]);  
  option.appendChild(year);
  document.getElementById('carYears').appendChild(option)
});

document.getElementById('carYears').onchange = function(e) {
   let chosenYear = document.getElementById('carYears').value;
   
   let filteredCarType = Cars.filter((records) => {
   	  if(records["Year"] == chosenYear) return records["CarType"];
   });   
   updateMake(filteredCarType);
}

function updateMake(carDetailsArray) {
  let makeDropDown = document.getElementById('carMake');
    while (makeDropDown.hasChildNodes()) {
        makeDropDown.removeChild(makeDropDown.lastChild);
    }
    for(i=0;i<carDetailsArray.length;i++) {
      let option = document.createElement('option');      
      let make = document.createTextNode(carDetailsArray[i]["CarType"]);  
      option.appendChild(make);      
      document.getElementById('carMake').appendChild(option);       
      document.getElementById('carMake').removeAttribute('disabled')
    }
}

<select id="carYears">
<option>Please Select Car Year</option>
</select>
<select disabled id="carMake">
Year
</select>

根据下拉列表选择从json数组填充值？

4 个答案: