引導 select 下拉“無結果”點擊事件

Question

我正在使用引導程序 select 下拉菜單，其中包含以下代碼。

HTML

    @Html.DropDownList("Product", SelectList, new { data_live_search = "true", @class = "content-small selectpicker", @tabindex = 1 })

在此下拉列表中，我需要提供一個選項，以將在下拉列表中的搜索欄中鍵入的新值添加到基於單擊事件的下拉列表的現有集合中。 我已將 UI 修改為“創建”而不是“未找到結果”。 請參考下面的代碼和 UI。

JS

    $('#Product').selectpicker({ noneResultsText: 'Create ' });

用戶界面

我正在嘗試將點擊事件添加到此文本“創建”內容中，該內容在上面的屏幕截圖中突出顯示，以將該內容動態添加到下拉列表的現有集合中。

但是，在單擊該文本時，下拉菜單會關閉並且顯示文本的元素會被刪除，因此我無法調用單擊 function 來動態添加此項目。

誰能讓我知道使用它的可能性。？

維傑。

Answer 1

我認為您正在跳過您正在處理的輸入在.selectpicker之外。 您可以在下面找到工作片段。

 $('.selectpicker').selectpicker({ noneResultsText: '<a href="#" class="creator">Create</a> ' }); $(".selectpicker").on("click",".creator",function(){ $("p span").html("Clicked for "+$(".pickercontainer.bs-searchbox input").val()); });

 .creator { display:inline-block; float:left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" /> <link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script> <div class='pickercontainer'> <select class="selectpicker" data-live-search="true" > <option>Alabama</option> <option>Alaska </option> <option>Arizona </option> </select> </div> <br> <p>Action: <span></span></p>

Answer 2

$('.selectpicker').selectpicker({ noneResultsText: ' {0} (create new)' });

function createNew(event){ var value = $(event).parents('div').siblings('.bs-searchbox').find('input').val(); //做點什么... alert(value); }