将相同的选项附加到多个选择

Question

大家好：快速提问：我的页面中有三个 Select 元素，我需要用相同的选项填充它们（最初）。数据来自 AJAX 请求。

有人能告诉我为什么只有第一个 Select 附加了选项（尽管它在 .each() 中是最后一个），而其他的没有？这不是一个大问题，我可以通过其他方式解决它，但我只是想知道是否有人可以向我解释一下。

$(document).ready(function () {

            
                    var data = {test: "testing", test2: "testing2", test3: "testing3"}
                    let subscriptionSelect = $('#select1');
                    let showSelect = $('#select3');
                    let noShowSelect = $('#select4');
                    subscriptionSelect.empty().append($('<option></option>').val('').text('------'));
                    showSelect.empty().append($('<option></option>').val('').text('------'));
                    noShowSelect.empty().append($('<option></option>').val('').text('------'));
                    $.each(data, function (key, value) {
                        let option = new Option(key, value);
                        noShowSelect.append(option);
                        showSelect.append(option);
                        subscriptionSelect.append(option);
                    });
                   
                },
        );

JSFiddle : https://jsfiddle.net/stuoq3f5/

Answer 1

您可以 select 所有“select”元素并附加选项：

$.each(data, function (key, value) {
    let option = new Option(key, value);
    $(option).html(value);
    $('select').append(option);
});

Fiddle

Answer 2

您必须将 cloneNode(true) 与深度克隆一起使用，因为正在发生的事情是您正在创建一个选项，然后将其附加到 noShowSelect，然后从 noShowSelect 中删除它。

                   $.each(data, function (key, value) {
                    let option = new Option(key, value);
                    $(option).html(value);
                    noShowSelect.append(option.cloneNode(true));
                    showSelect.append(option.cloneNode(true));
                    subscriptionSelect.append(option.cloneNode(true));
                });

将相同的选项附加到多个选择

Appending the same Option to multiple selects

javascript

append

options