jQuerySelect轉換為Select2沒有下拉選項

我的應用程式使用 API 提取下拉串列選項，并在用戶單擊編輯按鈕時動態地在表中創建下拉串列。使用 jQuery 的基本“選擇”功能，一切都按預期作業。啊啊啊，然后我看到了 Select2 的所有光澤并內置了搜索框。由于我的串列在生產中會變得很長，這是我真正應該擁有的功能。我見過很多片段，人們只是在選擇項上呼叫 .select2() 并讓它開箱即用。我得到了該框，但它不起作用:) Select2 框出現并選擇了正確的下拉項，但是當我單擊該框時沒有下拉選項。

我復制了我的應用程式的基本功能和結構，包括模擬的 API 資料回應。有沒有辦法使現有的選擇功能作業，還是我需要使用 Select2 從頭開始??構建它？此外，根據我的資料結構，這可能嗎？

謝謝參觀！

JS Fiddle 包含相同的代碼，但為了您的編輯方便而包含在內：https : //jsfiddle.net/tekowalski/amrhjo6y/9/

$(document).ready(function () {
  $('#edit_btn').click(function () {
    let clickedRow = $($(this).closest('td')).closest('tr');
    $(clickedRow).find('td').each(function () {
      if ($(this).hasClass('edit_account')) {
        fnCreateDropdown($(this), option_data);
      }
    });
  });

  function fnCreateDropdown(obj, options) {
    let html = '<select type="dropdown-menu dropdown-menu-end">';
    let account_type = '';
    let grouped = false;

    for (var idx in options) {
      let my_act_type = options[idx]['account_type_name']; // Set Account Type
      if(my_act_type !== account_type) {
        if(grouped === true) { // Close out option group if one has been made
          html  = '</optgroup>'
        }
        
        html  = '<optgroup label="'   my_act_type   '">'
        grouped = true;
        
        account_type = my_act_type; // Set account_type for next loop

      }
      if (options[idx]['id'] === 2) {
        selected = ' selected ';
      } else {
        selected = '';
      }
      html  = '<option '   selected   'id="'   options[idx]['id']   '">'   options[idx]['name']   '</option>';
    }

    html  = '</optgroup></select>';
    obj.html($(html));
    $(obj).select2(); // Comment out this line for a functional select with dropdown options
  }

  option_data = [
    {account_type_id: 1, account_type_name: 'Asset', id: 1, name: 'Asset Account'},
    {account_type_id: 2, account_type_name: 'Expense', id: 2, name: 'Expense Account'}
    ]
});
  

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<table>
<thead>
  <tr>
    <th>Account Name</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="edit_account">
      Expense Account
    </td>
    <td>
      <button id='edit_btn'>Edit</button>
      </td>
  </tr>
</tbody>
</table>

uj5u.com熱心網友回復：

.select2()必須應用于<select>元素。

在這種情況下，obj.select2()不適用于 a<select>因為它select是插入動態生成的容器。

改變

$(obj).select2();

到

obj.find("select").select2()

適用于select容器內部。

旁注：obj已經是一個 jquery 物件，所以沒有必要再次包裝它，但除了一點點開銷之外，它并沒有什么害處。

更新片段：

顯示代碼片段

$(document).ready(function () {
  $('#edit_btn').click(function () {
    let clickedRow = $($(this).closest('td')).closest('tr');
    $(clickedRow).find('td').each(function () {
      if ($(this).hasClass('edit_account')) {
        fnCreateDropdown($(this), option_data);
      }
    });
  });

  function fnCreateDropdown(obj, options) {
    let html = '<select type="dropdown-menu dropdown-menu-end">';
    let account_type = '';
    let grouped = false;

    for (var idx in options) {
      let my_act_type = options[idx]['account_type_name']; // Set Account Type
      if(my_act_type !== account_type) {
        if(grouped === true) { // Close out option group if one has been made
          html  = '</optgroup>'
        }
        
        html  = '<optgroup label="'   my_act_type   '">'
        grouped = true;
        
        account_type = my_act_type; // Set account_type for next loop

      }
      if (options[idx]['id'] === 2) {
        selected = ' selected ';
      } else {
        selected = '';
      }
      html  = '<option '   selected   'id="'   options[idx]['id']   '">'   options[idx]['name']   '</option>';
    }

    html  = '</optgroup></select>';
    obj.html($(html));
    obj.find("select").select2(); 
  }

  option_data = [
    {account_type_id: 1, account_type_name: 'Asset', id: 1, name: 'Asset Account'},
    {account_type_id: 2, account_type_name: 'Expense', id: 2, name: 'Expense Account'}
    ]
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<table>
<thead>
  <tr>
    <th>Account Name</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="edit_account">
      Expense Account
    </td>
    <td>
      <button id='edit_btn'>Edit</button>
      </td>
  </tr>
</tbody>
</table>

標籤：

上一篇：如果所有孩子都是“顯示：無”，我該如何隱藏父div

下一篇：jquery計數器在視口上激活