[英]How can I add options to a Bootstrap selectpicker dynamically?
我正在嘗試創建一個下拉列表，當單擊第一個列表項時，會打開一個與列表旁邊的選定項相關的新列表，如下所示：
我嘗試為此使用Bootstrap selectpicker，然后單擊嘗試將另一個列表添加為：
<select class="selectpicker" data-live-search="true">
<optgroup label="Select Group 1">
<option value="1">Option 1.1</option>
<option value="2">Option 1.2</option>
<option value="3">Option 1.3</option>
</optgroup>
</select>
並在 jquery 中單擊嘗試附加和刷新選擇器。
$(event.target)
.append("<optgroup label="Select Group 2">
<option value="4">Option 2.1</option>
<option value="5">Option 2.2</option>
<option value="6">Option 2.3</option>
</optgroup>");
$(dropdowmElem).selectpicker("refresh");
但我不確定如何實現類似的布局。 我不是在尋找類似的 CSS 樣式，而是在現有列表旁邊呈現另一個列表，有什么幫助/資源來解決這個問題嗎？
我創建了一個示例，該示例通過從數組中獲取數據來創建具有分組選項的動態下拉菜單。 我希望它有幫助
// Example data Array list namespace_list = [ ['test1-c1', 'test2-c1', 'test3-c1', 'test4-c1', 'test5-c1', 'test6-c1'], ['test1-c2', 'test2-c2', 'test3-c2', 'test4-c2', 'test5-c2', 'test6-c2'] ] $('#pod_dropdown').selectpicker(); // Selecting selectpicker dropdown select = document.getElementById('pod_dropdown'); for (let namespace of namespace_list) { // Generating group name namespace_name = namespace[0].slice(6, 8)+'-title' // Creating the optiongroup var optgroup = document.createElement('optgroup'); optgroup.id = namespace_name; optgroup.label = namespace_name // Appending optiongroup to the dropdown select.appendChild(optgroup); // Selecting the optiongroup optiongroup = document.getElementById(namespace_name); for (let pod of namespace) { // Creating the options of the optiongroup var opt = document.createElement('option'); opt.value = pod; opt.innerHTML = pod; // Appending the option to the optiongroup optiongroup.appendChild(opt); } } // Refresh the dropdwon menu $('#pod_dropdown').selectpicker("refresh"); // Getting the value after selecting it in the UI and unselect the dropdown function filterpod() { let pod = $('#pod_dropdown').val().toString(); console.log(pod) }
<!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- bootstrap --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- multi select dropdown --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> <!-- Creatting the dropdown --> <select id="pod_dropdown" class="selectpicker" data-style="btn btn-primary btn-sm" multiple data-live-search="true" data-width="auto"></select> <!-- Calling the function filterpod when hide dropdown after select option --> <script type="text/javascript"> $('#pod_dropdown').on('hide.bs.select', function(e) {filterpod();}); </script>
這可能不起作用的一個原因是，您可以在雙引號中使用雙引號或在多行中使用雙引號。 嘗試改用這個：
$(event.target)
.append(`<optgroup label="Select Group 2">
<option value="4">Option 2.1</option>
<option value="5">Option 2.2</option>
<option value="6">Option 2.3</option>
</optgroup>`);
$(dropdowmElem).selectpicker("refresh");
您也無法在<option>上檢測到鼠標懸停。 如果您想以某種方式將兩者鏈接在一起，您可以檢測到:hover 。 如果此功能無法按您希望的方式工作，您也可以創建自己的菜單類型。
已通過以下步驟解決：
$("#dropdownid").append('<option value="1" title="1">1</option>');
$("#dropdownid").selectpicker("refresh");
為什么不在多級下拉菜單中實現它
$(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); });
.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> </style> </head> <body> <div class="container"> <h2>Multi-Level Dropdowns</h2> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li class="dropdown-submenu"> <a class="test" href="#">Another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <script> </script> </body> </html>
用optgroup替換菜單項
如何在 bootstrap selectpicker 中為選項（下拉）設置固定寬度
[英]How can I set fixed width for options(dropdown) in bootstrap selectpicker
選擇bootstrap selectpicker選項后，無法從javascript動態觸發onchange事件
[英]Not able to fire onchange event dynamically from javascript after selecting options of bootstrap selectpicker
如何使用 javascript 將引導警報動態添加到頁面？
[英]How can I dynamically add bootstrap alerts to a page using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.