如何根据另一个下拉列表更改下拉列表值

Question

我有一些JSON对象，我正在将它们填充到材料编号的第一个下拉列表中。其中一些材料编号有多个位置。我希望能够从第一个下拉列表和第二个下拉列表中选择材料编号，以填充材料编号的位置。例如，当我在第一个下拉列表中选择905-830005时，我需要选项PROD和STERILE-PK显示在第二个下拉列表。

JSON://在下面的JQUERY中声明为RfqData

[
{"material":"900-100049","location":"STERILE-PK"},
{"material":"900-100050","location":"STERILE-PK"},
{"material":"900-110005","location":"PROD"},
{"material":"900-600030","location":"STERILE-PK"},
{"material":"900-600031","location":"STERILE-PK"},
{"material":"905-830005","location":"PROD"},
{"material":"905-830005","location":"STERILE-PK"},
{"material":"905-830006","location":"PROD"},
{"material":"905-830006","location":"STERILE-PK"},
{"material":"905-860008","location":"STERILE-PK"},
{"material":"905-860009","location":"STERILE-PK"}
]

HTML:

<table> 
<tr>
<td>Select Material:</td>
<td><select id="selectMaterial" ><option></option></select></td>
</tr>
<tr>
<td >Location ID</td>
<td ><select id="selectLocation"><option></option></select></td>
</tr>
</table>

JQUERY://RfqData是我在之上的JSON字符串

$(document).ready(function () {
var json = JSON.parse(SysGetElement('RfqData').value);  
$.each(json, function () {
$('#selectMaterial').append(
$("<option></option>").text(this.material)
);
});
});

Answer 1

$('#selectMaterial').on('change',GetSelectLocation);

function GetSelectLocation() {
//Here you get the selected materialId of your selectMaterial dropdown.
var selectedMaterialId = $('#selectMaterial option:selected').val();
//Now you must have your original list here. And using the above id fetch the list of location and create a location list. 
var locationList = //fetch location list.
$('#selectLocation').html("");
$.each(locationList , function () {
$('#selectLocation').append(
$("<option></option>").text(this.location));
}

Answer 2

$("#selectMaterial").change( function(){
var item = "";
$("#selectLocation").empty();
$.each(json, function () {
if ($(this).val() == /*the material on json*/){
item += '<option value="' + /*your value*/ + '">' + /*your value*/ + '</option>'
}
});
$('#selectMaterial').html(item);
});