jquery 初始化动态创建的select2

wlp8pajw 于 2022-12-22 发布在 jQuery

关注(0)|答案(7)|浏览(351)

我有一个select2下拉列表，我为它提供了一个matcher函数，它在初始页面加载时是这样初始化的：

jQuery(document).ready(function() {
    jQuery(".my_select2").select2({
        matcher: function(term, text) {...}
    });
});

这在初始页面加载时有效。
现在，我有了额外的下拉菜单（动态创建的select元素）（通过 AJAX 拉入，即jQuery(match).load(url)）。这些额外的下拉菜单没有初始化为选择2小部件，这是可以理解的，即使它们与原始的选择2选择器匹配。
那么，如何让jQuery将这些动态创建的select元素视为需要初始化的select2项呢？我是否可以对匹配的元素设置某种“监视”，以便每次向页面添加匹配的元素时，select2初始化都会启动？
我记得不久前在jQuery中引入了live()，如果我理解正确的话，它支持在创建元素之前匹配元素。我从来没有使用过这个特性，现在它似乎被弃用了。但它确实感觉像是我正在寻找的那种东西。
这是一个WordPress插件，目前使用jQuery v1.11.2。

jquery

来源：https://stackoverflow.com/questions/29972399/initialising-select2-created-dynamically

7条答案

按热度按时间

ewm0tg9j1#

您可以尝试使用DOMNodeInserted并查找select或您要分配给它们的类

- 一个

$('body').on('DOMNodeInserted', 'select', function () {
    $(this).select2();
});

- 更新**

DOMNodeInserted

- 已弃用**此功能已从Web标准中删除。虽然某些浏览器可能仍支持此功能，但它正在被删除。请避免使用此功能，并尽可能更新现有代码;

对于MutationObserver，建议的方法如下所示
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-22

kxkpmulp2#

我最近遇到了类似的情况，但我用了一种非常平常的方式：

$(document).ready(function() {

 //function to initialize select2
  function initializeSelect2(selectElementObj) {
    selectElementObj.select2({
      width: "80%",
      tags: true
    });
  }


 //onload: call the above function 
  $(".select-to-select2").each(function() {
    initializeSelect2($(this));
  });

 //dynamically added selects

  $(".add-new-select").on("click", function() {
    var newSelect = $("<select class='select-to-select2'  multiple><option>option 1</option><option>option 2</option></select>");
    $(".select-container").append(newSelect);
    initializeSelect2(newSelect);
  });


});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<div class="select-container">
  <select class='select-to-select2' multiple>
    <option value='1'>option1</option>
    <option value='2'>option2</option>
  </select>

  <select class='select-to-select2' multiple>
    <option value='1'>option1</option>
    <option value='2'>option2</option>
  </select>

</div>
<div>
  <button class="add-new-select">Add New Select</button>
</div>

如果是. load函数，则查找要在load函数回调中初始化的所有选择元素，并对每个选择元素调用initializeSelect2。
我希望这对正在寻找简单解决方案的人有所帮助。

赞(0）回复(0）举报 2022-12-22

2nc8po8w3#

对我很有效

<div id="somediv">
    <select class="component">
    ...
    </select>
</div>


<script>
    $(document).on('click', '#addComponent', function () {

        $('#somediv').append(data); //data is my new select
        $('.component:last').select2();
    });
</script>

赞(0）回复(0）举报 2022-12-22

efzxgjgh4#

我也面临过同样的问题，但在挠头几天后，我找到了一个解决方案，但如果你期望良好的性能，它不是很好。
因此，当DOM第一次加载时，无论加载什么选择项，都将具有select 2功能。对于动态生成的字段，select 2功能将不可用，因为select 2脚本已经加载。
因此，要使select 2工作，请在单击时动态重新加载脚本。

function reload(id) {
    $(id).on("click", function () {
        $("head").append($("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css' type='text/css' media='screen' />"));
        $.getScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function () {
            $.getScript("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js", function () { 
                $('select').select2();
            })
        })
    })
}

它所做的是将select 2功能添加到$中。

赞(0）回复(0）举报 2022-12-22

s4chpxco5#

与上述答案相似：

function initSelect2(element){
  element.select2({   });
}

// Dynamic add 
$('button[data-id="add-item"]').on('click', function(){
   // Add element
   obj.addItem();
   // Add Select2 to element
   initSelect2($('element'));
});

赞(0）回复(0）举报 2022-12-22

kkih6yb86#

要添加到其他答案，如果应用于，select2可能会返回奇怪的结果
1.隐藏选择
或
1.选择具有相同ID的
要不应用于隐藏元素，请使用:visible选择器。如果动态生成元素，请确保id和data-select2-id是唯一的（也可以将其删除）。

赞(0）回复(0）举报 2022-12-22

nr7wwzry7#

我的解决方案和roshan的类似，但是没有在函数中传递select对象，这是一个 AJAX 调用的表输出。

$(document).ready(function() {

        function initSelect2() {
            $("[id^='DDAlertFreq']").select2({
                minimumResultsForSearch: Infinity,
                allowClear: false,
                theme: "bootstrap"
            });
        };

//define the dropdown and set to variable    
var DDAlertFrequency = '<select id="DDAlertFreq" ><option value="Fifteen_Minutes">15 Minutes</option><option value="Thirty_Minutes">30 Minutes</option><option value="Hour">Hour</option><option value="Two_Hours">2 Hours</option><option value="Three_Hours">3 Hours</option><option value="Four_Hours">4 Hours</option><option value="Six_Hours">6 Hours</option><option value="Eight_Hours">8 Hours</option><option value="Twelve_Hours">12 Hours</option><option value="Day">Day</option></select>'

function RetrieveUserAlerts(uid) {
                $.ajax({
                    url: 'SavedSearches.asmx/LoadUserAlerts',
                    dataType: 'json',
                    method: 'post',
                    data: { userid: uid },
                    success: function (data) {
                        var tbl = $("#tblAlerts > tbody");
                        tbl.empty();
                        $.each(data, function () {
                            userAlert.alert_idx = this['alert_idx'];
                            userAlert.Name = this['Name'];
                            userAlert.price_alert_low = this['price_alert_low'];
                            userAlert.alert_frequency = this['alert_frequency'];
                            userAlert.alert_max_per_day = this['alert_max_per_day'];
                            userAlert.alert_to_email = this['alert_to_email'];
                            userAlert.alert_to_sms = this['alert_to_sms'];
                            userAlert.active = this['active'];
                            userAlert.alert_start_date = moment(this['alert_start_date']).format("MM/DD/YY");
                            userAlert.alert_end_date = moment(this['alert_end_date']).format("MM/DD/YY");
                            userAlert.OpenSectionID = this['OpenSectionID'];
// modify the dropdown to assign unique id and match selection
                            var selectAlert = DDAlertFrequency.replace("DDAlertFreq", "DDAlertFreq_" + userAlert.alert_idx).replace('"' + userAlert.alert_frequency + '"', '"' + userAlert.alert_frequency + '" selected');
                            var tblRow = '<tr><td>'
                                + userAlert.Name
                             + '</td><td>'
                            + '<input id="txtPriceAlertLow_' + userAlert.alert_idx + '" type="text" class="form-control" value="' + userAlert.price_alert_low + '"/>'
                             + '</td><td>'
                            + '<input id="chkAlertToEmail_' + userAlert.alert_idx + '" type="checkbox" ' + ((userAlert.alert_to_email == true) ? "checked" : "") + ' />'
                             + '</td><td>'
                            + '<input id="chkAlertToEmail_' + userAlert.alert_idx + '" type="checkbox" ' + ((userAlert.alert_to_sms == true) ? "checked" : "") + ' />'
                             + '</td><td>'
                            + selectAlert //modified Select2 dropdown
                             + '</td><td>'
                             + '<input id="txtMaxPerDay_' + userAlert.alert_idx + '" type="text" class="form-control" value="' + userAlert.alert_max_per_day + '"/>'
                             + '</td><td>'
                            + userAlert.alert_start_date
                             + '</td><td>'
                            + userAlert.alert_end_date
                             + '</td><td>'
                           + '<input id="chkActive_' + userAlert.alert_idx + '" type="checkbox" ' + ((userAlert.active == true) ? "checked" : "") + ' />'
                             + '</td><tr>'
                            tbl.append(tblRow);
                            initSelect2(); //call the function to initialize all Select2 dropdowns created
                        });
                    },
                    error: function (err) {
                        console.log('Error (RetrieveUserAlerts): ' + JSON.stringify(err, null, 2));
                    }
                });
            };

抱歉留下了无关的东西-我评论了感兴趣的领域。希望这对其他人有帮助！

赞(0）回复(0）举报 2022-12-22

我来回答

jquery 初始化动态创建的select2

7条答案

相关问题

热门标签

最新问答