2

我正在使用bootstrap-select。

select如果在我得到的搜索菜单中找不到它，我该如何添加一个新选项data-live-search="true"，因为它还不存在？

4

2 回答 2

5

请按照以下代码::

HTML

<select class="selectpicker" id="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

CSS

.no-results{
    cursor: pointer;
}

查询

$(document).ready(function (e) {
    $(document).on('click', 'li.no-results', function () {
        var new_option = $(this).text().split('"')[1];
        $("#selectpicker")
       .append('<option>'+ new_option +'</option>')
       .selectpicker('refresh');
       //You can also call AJAX here to add the value in DB
    });
});

请根据需要更改这些代码。
工作 Jsfiddle 链接：https ://jsfiddle.net/ktmv1vxh/1/

于 2017-03-18T12:41:11.087 回答
0

我发布了这个改进的答案，希望它可以帮助其他人正常使用 Bootstrap 选择只需添加以下内容

CSS

.comboxme .dropdown-menu .no-results {
        display: none !important;
    }
    .comboxme .dropdown-menu {
        top: unset !important;
        bottom: unset !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }
    .comboxme .bs-searchbox {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }
    .comboxme .btn {
        background-color: white;
        color: blue;
    }
    .comboxme .bs-caret {
        color: white;
    }

javascript

$('.selectpicker').selectpicker({
    style: 'btn-info',
    selectOnTab: true,
    size: 6
});

$(function () {
    $(".bs-searchbox input").blur(function () {
        var numberOfActiveItems = $(this).closest(".dropdown-menu").find("li.active").length;
        if (numberOfActiveItems > 0) return;
        console.log(numberOfActiveItems);
        var selectBoxName = $(this).closest(".comboxme").find("select")[0].name;
        $("#" + selectBoxName + " option[value='-1']").remove();
        $("#" + selectBoxName)
            .append('<option value="-1" selected>' + $(this).val() + '</option>')
            .selectpicker('refresh');
        $("#" + selectBoxName + "_add").remove();
        $(this).closest("form").append('<input type="hidden" id="' + selectBoxName + '_add" name="' + selectBoxName + '_add" value="' + $(this).val() + '" />');
    });
});

html

<form>
<select data-width="280px" data-live-search="true" class="selectpicker comboxme form-control" data-val="true" 
data-val-required="The Status field is required." id="Status" name="Status">
<option value="1">Colorado</option>
<option value="2">Connecticut</option>
<option value="3">Delaware</option>
<option value="4">Florida</option>
<option value="6">Georgia</option>
<option value="7">Kentucky</option>
</select>
</form>

示例：https ://github.com/codejq/comboxme

于 2018-12-05T11:08:54.783 回答