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

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>

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); 
}

Answer 3

你可以试试这个：

$('select').selectpicker({
    noneResultsText: "<li style='cursor:pointer' class='no-results-found'>Other</li>"
});

在这里您可以创建

<li>

或任何您想要的内容，在此调用之后单击事件：

 $(".bootstrap-select input").on("keyup", function() {
     $this = $(this).parents(".bootstrap-select").find(".no-results-found")
     if ($this.length > 0) {
         $this.on("click", function() {
             alert("here");
         });
     }
 });   

我希望这对你有帮助:)