引导 select 下拉“无结果”点击事件

Question

I am using bootstrap select dropdown which has the following code.

HTML

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

In this dropdown i need to provide an option to add new values which are typed in the search bar in the dropdown to the existing collection of the dropdown based on the click event. I have modified the UI to say "Create" instead of No results found. Please refer the code and UI below.

JS

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

UI

I am trying to add click event to this text "Create" content which is highlighted in the screenshot above to add that content dynamically to the existing collection of the dropdown.

But, while clicking that text the dropdown gets closed and the element which shows the text gets removed, hence i could not call the on click function to add this item dynamically.

Can anyone please let me know the possibilities of using this.?

Vijay.

Answer 1

I think you're skipping that the input you're dealing with is outside of the .selectpicker . You can find working snippet below.

 $('.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: ' (create new)' });

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