두 번째 콤보 상자를 변경하여 하나의 콤보 상자 업데이트

Question

두 번째 콤보 상자를 변경하여 하나의 콤보 상자를 업데이트하려고합니다. 예를 들어 : 나는이 응답 (문자열)이 있습니다

var response = [{ 
    "A": "a2", 
    "B": "b2", 
    "C": "c2" 
}, 
{ 
    "A": "a3", 
    "B": "b3", 
    "C": "c3" 
}, 
{ 
    "A": "a3", 
    "B": "b331", 
    "C": "c33" 
}, 
{ 
    "A": "a3", 
    "B": "b33221", 
    "C": "c3" 
}, 
{ 
    "A": "a4", 
    "B": "b4", 
    "C": "c4" 
}, 
{ 
    "A": "a2", 
    "B": "b221", 
    "C": "c222" 
}]; 

을 나는 "myDropDownA"에서 "A2, A3, A4"될 것이라고합니다. 예 : "myDropDownA"에서 "a3"을 선택하면 "myDropDownB"보다 "b3, b331, b33221"만 나타납니다 (a3 만 참조하기 때문에). 및 "A"개체가 반복되는 것을 원하지 않습니다.

var myDropDownA = $("#myDropDownA"); 
$.each(response, function (index, obj) { 
    //alert(index + ": " + obj.A); 
    myDropDownA.append($("<option />").val(obj.A).text(obj.A)); 
}); 

    var myDropDownB = $("#myDropDownB"); 
    $.each(response, function (index, obj) { 
     //alert(index + ": " + obj.B); 
     myDropDownB.append($("<option />").val(obj.B).text(obj.B)); 
}); 

위와 같이 작동하도록하려면 무엇을 변경 (추가)해야합니까?

Answer 1

누락 된 것은 이벤트 처리기를 드롭 다운의 변경 이벤트에 연결하는 것입니다. 적절한 값으로 드롭 다운 B를 다시 채워 넣었습니다.

var response = [ 
    { "A": "a2", "B": "b2", "C": "c2" }, 
    { "A": "a3", "B": "b3", "C": "c3" }, 
    { "A": "a3", "B": "b331", "C": "c33" }, 
    { "A": "a3", "B": "b33221", "C": "c3" }, 
    { "A": "a4", "B": "b4", "C": "c4" }, 
    { "A": "a2", "B": "b221", "C": "c222"} 
]; 

var uniqueByProperty = function(arr, prop) { 
    var seen = {}; 
    return arr.filter(function(elem) { 
     var val = elem[prop]; 
     return (seen[val] === 1) ? 0 : seen[val] = 1; 
    }) 
} 

var aList = uniqueByProperty(response, "A"); 
var myDropDownA = $("#myDropDownA"); 
var myDropDownB = $("#myDropDownB"); 

// Populate dropdown A 
$.each(aList, function(index, obj) { 
    myDropDownA.append($("<option />").val(obj.A).text(obj.A)); 
}); 

// Attach event handler for dropdown A 
myDropDownA.on('change', function(){ 
    var ddl = $(this); 

    // Get related objects 
    var bList = response.filter(function(elem) { 
     return (elem.A === ddl.val()); 
    }); 

    // Populate dropdown B 
    myDropDownB.empty(); 
    $.each(bList, function(index, obj) { 
     myDropDownB.append($("<option />").val(obj.B).text(obj.B)); 
    }); 
}); 

// Trigger population of dropdown B 
myDropDownA.change(); 

작동 데모는 jsfiddle을 참조하십시오.