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

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

您必须将 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));
                });
               

Answer 2

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

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

Fiddle