jquery - 设置动态添加的下拉列表选定值，它是一个变量

Question

我有一个按钮，单击时将 a 添加dropdownlist dynamically到 div 中，然后我需要为每个添加的设置选择值dropdown。

这里的演示：

在我的演示中，可能有n数量containerDiv和相应n的数量 setSelectedValue_n ，我需要为受尊重的ddl设置setSelectedValue_1

JS：

$("#btn").on('click', function () {
    var setSelectedValue_1 = 'mno';
    var setSelectedValue_2 = 'pqr';
    var setSelectedValue_3 = 'abc';
    $('.containerDiv').each(function () {

        var ddGenerate = '<select><option>abc</option><option>pqr</option>option>xyz</option> <option>mno</option></select>';
        $(this).append(ddGenerate);
    });
});

Answer 1

演示

每个选项中的附加值属性

改变

var ddGenerate = '<select><option value="abc">abc</option><option value="pqr">pqr</option><option value="xyz">xyz</option> <option>mno</option></select>';
                                    ^ //added value attribute here in each option

阅读.appendTo()和.val()

 $(ddGenerate).val('abc').appendTo($(this));

完整代码

$("#btn").on('click', function () {
    var setSelectedValue_1 = 'mno';
    var setSelectedValue_2 = 'pqr';
    var setSelectedValue_3 = 'abc';
    $('.containerDiv').each(function () {

        var ddGenerate = '<select><option value="abc">abc</option><option value="pqr">pqr</option><option value="xyz">xyz</option> <option>mno</option></select>';
        $(ddGenerate).val('pqr').appendTo($(this));
    });
});

更新代码

演示

$("#btn").on('click', function () {
    var arr = ['mno', 'pqr', 'abc'];
        $('.containerDiv').each(function (i) {
            var ddGenerate = '<select><option value="abc">abc</option><option value="pqr">pqr</option><option value="xyz">xyz</option> <option>mno</option></select>';
            $(ddGenerate).val(arr[i]).appendTo($(this));
        });
});

Answer 2

你的意思是这样的：

$("#btn").on('click', function () {
    var arr = ['mno', 'pqr', 'abc'],    
        i = 0;
    $('.containerDiv').each(function () {
        var selected_v = arr[i];
        var ddGenerate = '<select><option value="abc">abc</option><option value="pqr">pqr</option><option value="xyz">xyz</option> <option value="mno">mno</option></select>';
        $(this).append(ddGenerate);
        $(this).find("select option[value='"+selected_v+"']").prop("selected", true);
        i++;
    });
});

更新小提琴