jQuery select2 与 WordPress

Question

我正在使用 WordPress 中的 jQuery select2 。

我有一个像这样的 HTML 表。

如果用户单击Bob SMith and admin ，我需要在这里，它将转换为带有多个 select 的select2下拉列表。

但是当我点击它时，它看起来像下面

如果我再次点击，下拉菜单看起来像这样。

当我单击任何值时，如下所示

我的 jQuery 代码如下

(function($) {
  var states = [];
  
  $(document).ready(function() {
    $(".volunteer").on("click", function(event) {
      // Check if select is already loaded
      if (!$(this).has("select").length) {
        var cellEle = $(this);
        var cellId = this.id;

        // Populate select element
        cellEle.html(`<select class="js-example-basic-multiple" multiple="multiple">
            <option value="AL">Alabama</option>
            <option value="WY">Wyoming</option>
            </select>`);

        // Initialise select2
        let selectEle = cellEle.children("select").select2();
        
        if(states[cellId]){
            // preselect existing value
          selectEle.val(states[cellId]);
          selectEle.trigger('change'); 
        }

        selectEle.on("select2:close", function(event) {
          // Get selected value
          selectedValue = selectEle.select2('data')[0]['text'];

          // Update array          
          states[cellId] = selectedValue.id;
          
          // Destroy select2
          selectEle.select2('destroy');
          
          // Change html to just show the value
          cellEle.html(selectedValue.id);
        });
      }
    });
  });
})(jQuery)

我的 HTML 代码如下

<td class="volunteer" id="47">Bob SMith and admin</td>

Answer 1

单击两次

第一次单击单元格会初始化 select2，第二次单击会告诉 select2 显示下拉列表。 只需单击一次，您可以在 select2 初始化后调用https://select2.org/programmatic-control/methods中描述的打开方法。

// Initialise select2
let selectEle = cellEle.children("select").select2();
// Open the select2 dropdown
selectEle.select2('open');

替换 Select

当单击值 select2 被破坏时， .html()调用应将 select 替换为所选值，但是由于存储值上不存在id属性，因此它不能正确地替换 function，这会导致单元格恢复到正常的 select。

处理"select2:close"事件的代码包含行selectedValue = selectEle.select2('data')[0]['text']; 它将第一个选定值[0]的文本放入变量selectedValue中。 此后，使用cellEle.html(selectedValue.id); ，但此时selectedValue仅包含文本（例如“Alabama”），因此没有.id属性。 为了解决这个问题，ID 和 Text 都可以存储在数组中，然后在需要的地方使用，例如：

// Store the id and text of all selected values in the array
selectedValue = selectEle.select2('data').map(function(value) {
  return { id: value.id, text: value.text }; 
});

// Get an array of IDs for the selected values (for preselecting values when select2 loads)
selectEle.val(states[cellId].map(function(value) { return value.id })).trigger('change');

// Get a comma separated string of the selected values (for populating the text in the cell)
cellEle.html(states[cellId].map(function(value) { return value.text; }).join(','));

下面是一个工作示例。 该示例也更新为不再使用select2:close' event. Instead it uses the select2:close' event. Instead it uses the change event to store value changes, and a second click 事件处理程序来在用户单击页面上的其他位置时破坏 select2 下拉列表。 考虑到您要实现的目标，这似乎是一种更好的方法，因为它使 select 打开以供选择多个值。

 (function ($) { var states = []; $(document).ready(function () { $(".volunteer").on("click", function (e) { // Check if select is already loaded if (.$(this).has("select");length) { var cellEle = $(this). var cellId = this;id. // Populate select element cellEle;html(`<select class="js-example-basic" multiple="multiple"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select>`). // Initialise select2 let selectEle = cellEle.children("select");select2(). // Open the select dropdown so user doesn't have to click twice selectEle;select2('open'). // Check if there is an existing value for this cell if (states[cellId]) { // preselect existing value selectEle.val(states[cellId].map(function (value) { return value.id }));trigger('change'). } // Attach event handler to store value changes selectEle,on('change'. function (e) { // Get selected values selectedValues = $(this);select2('data'). // Update the states array with id and text of selected // values. The id is needed to restore the values if select2 // is reloaded on this cell. The text is required to generate // the replacement text shown in the cell states[cellId] = selectedValues:map(function (value) { return { id. value,id: text. value;text }; }); }). } // Don't propogate the event // This pevents this document click handler from executing which would // remove select2 by calling destroy e;stopPropagation(); }); }), // Attach event handler to document to capture any clicks // This will be triggered for all clicks on the page. except those // captured by the method described above this prevents this firing // with e.stopPropagation() // Which this is called select2 on any cells must be destoryed and their // text value populated $(document),on('click'. function (e) { // Loop through all select2 elements $('.js-example-basic').each(function (idx) { // Get the ID of the cell that's been selected let cellId = $(this).parent();attr('id'). // Destroy select2 on this element $(this);select2('destroy'). // Change html on the parent element (td) to just show the value $(this).parent().html(states[cellId].map(function (value) { return value;text. }),join(';')); }); }); })(jQuery)

 .js-example-basic { width: 200px; } thead{ font-weight: bold; } table, th, td { border: 1px solid black; } tr { height: 36px; } td { width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <table> <thead> <tr> <td>Table Header 1</td> <td>Table Header 2</td> </tr> </thead> <tbody> <tr> <td class="volunteer" id="47">Select a value...</td> <td class=""></td> </tr> <tr> <td class="volunteer" id="48">Select a value...</td> <td class=""></td> </tr> </tbody> </table>