javascript - Bootstrap选择下拉 "No Results"点击事件

Question

我正在使用具有以下代码的 Bootstrap 选择下拉菜单。

HTML

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

在此下拉列表中，我需要提供一个选项，以根据点击事件将在下拉列表的搜索栏中键入的新值添加到现有的下拉列表集合中。我已将 UI 修改为显示“创建”而不是未找到结果。请引用下面的代码和用户界面。

JS

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

用户界面

我正在尝试将点击事件添加到上面屏幕截图中突出显示的文本“创建”内容，以将该内容动态添加到下拉列表的现有集合中。

但是，当单击该文本时，下拉菜单将关闭并且显示文本的元素将被删除，因此我无法调用单击函数来动态添加该项目。

使用它有什么可能性？

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>