Bootstrap选择下拉菜单“无结果”点击事件

Question

我正在使用 Bootstrap 选择下拉菜单，其代码如下。

HTML

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

在这个下拉菜单中，我需要提供一个选项，可以根据点击事件将在下拉菜单搜索栏中键入的新值添加到现有的下拉菜单集合中。我已经修改了UI以显示“创建”而不是“未找到结果”。请参考以下代码和UI。

JS：

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

UI界面

我想要给上图中高亮显示的“创建”文本内容添加点击事件，以将该内容动态添加到下拉列表的现有集合中。

但是，在点击该文本时，下拉列表会关闭并且显示文本的元素会被删除，因此我无法调用单击函数以动态添加此项目。

这个问题是否有解决办法？

- Vijay457

---

从理论上讲，应该有一个选项数组，并且您将使用find()或filter()方法来查找键入的值。如果没有匹配项，您可以从某个函数返回button div。按钮可以是启用单击事件的HTML div。如果您感兴趣，我可以解释。 - Ali Waqas

@AliWaqas可以从下拉框的搜索框中获取输入的值。但是，我需要在用户点击“创建“键入文本”值时才处理键入的值。由于无法使用单击事件，因为下拉框在其单击上关闭。 - Vijay457

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>

- oguzhancerit

Answer 2

$('.selectpicker').selectpicker({
   noneResultsText: '<span class="pointer" onclick="createNew(this);"><b>{0}</b> (create new)</span>'
});

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

- Asaf Avraham