使用WordPress的jQuery选择2

(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({placeholder: "Select a value"});

        // 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 propagate the event
      // This prevents 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
      if(states[cellId] && states[cellId].length > 0){
        $(this).parent().html(states[cellId].map(function (value) {
          return value.text;
        }).join(','));
      } else {
        $(this).parent().html("Select a value...")
      }
    });
  });

})(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>