Как изменить значение раскрывающегося списка на основе другого раскрывающегося списка

Question

У меня есть несколько JSON объектов, которые я заполняю в первом раскрывающемся списке для номера материала. Некоторые из этих номеров материалов имеют более одного местоположения. Я хочу иметь возможность выбрать номер материала из первого раскрывающегося списка, а затем из второго раскрывающегося списка, чтобы заполнить места для номера материала. Например, когда я выбираю 905-830005 в первом раскрывающемся списке, мне нужно, чтобы параметры PROD и STERILE-PK отображались во втором раскрывающемся списке.

JSON: // Объявлено как RfqData в JQUERY ниже

[
 {"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);
});