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"
}];

我希望在＆＃34; myDropDownA＆＃34;将是＆＃34; a2，a3，a4＆＃34;。例如：如果我选择＆＃34; a3＆＃34; in＆＃34; myDropDownA＆＃34;，而不是＆＃34; myDropDownB＆＃34;将仅出现：＆＃34; b3，b331，b33221＆＃34; （因为他们只提到a3）。而且我不想重复＆＃34; A＆＃34;对象。

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进行工作演示。

通过更改第二个组合框来更新一个组合框

1 个答案: