如果尚不存在，如何从搜索中将选项添加到引导选择？答案

【问题标题】：How to add an option to a bootstrap-select from the search if it does not yet exist?如果尚不存在，如何从搜索中将选项添加到引导选择？
【发布时间】：2017-03-18 12:05:21
【问题描述】：

我正在使用bootstrap-select。

如果我在使用data-live-search="true" 获得的搜索菜单中找不到新选项，如何向select 添加新选项，因为它尚不存在？

【问题讨论】：

你想要什么？你能详细说明一下吗..
选项中没有选项值aa，当我搜索“aa”时选择显示“没有结果匹配“aa””我单击该项目并将其隐藏，但我想单击没有结果项目和添加选项值是“aa”，我可以吗？
该选项也只会添加到该选择框或数据库中？
是的，我在 db 上获取值和文本，所以当我添加选项时，我也要添加 db
请阅读What topics can I ask about 和How to ask a good question 以及完美的问题以及如何create a Minimal, Complete and Verifiable example SO 不是免费的 编码或代码转换或调试或教程或库查找服务 我们尝试修复您的代码，我们不编写您的代码

标签： jquery jquery-ui jquery-plugins bootstrap-selectpicker

【解决方案1】：

请按照以下代码::

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

JQUERY

$(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/

【讨论】：

有两个问题，一个是未定义的new_option。另一个是我有 4 个这个项目。我需要告诉哪个是哪个
@MuhammedAlmaz 请检查我的 jsfiddle 可行链接。对于 AJAX 部分，您必须使用谷歌搜索或发布新问题。
如何显示已选择的添加选项？我在同一页面中使用多个选择器，所以我想在 "$(document).on('click', 'li.no-results', function () {})" 上获取 select 的 ID

【解决方案2】：

我发布了这个改进的答案希望它可以帮助别人正常使用 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

【讨论】：