jquery select2 - 选择输入文本字符串的所有选项答案

【问题标题】：jquery select2 - Select all options with inputted text stringjquery select2 - 选择输入文本字符串的所有选项
【发布时间】：2023-04-02 06:05:02
【问题描述】：

我在这里想要实现的是我有一个文本输入，当我输入一个字符串（例如“帮助”）时 - 我希望在列表中自动选择所有“帮助”选项文本.

对不起，我应该提到我使用 jquery 的 select2 插件

例子-->

html:

<select id="select2" name="select2" multiple class="select2" style="width: 300px;">
<option value="1">ABC</option>
<option value="2">BPS</option>
<option value="3">BPS</option>
<option value="4">HELP</option>
<option value="5">HELP</option>
<option value="6">EX</option>
<option value="7">HELP</option>    
</select>

<br /><br />

<input type="button" name="Button" id="selectspecify" value="Select String" />&nbsp;
<input size="50" name="selectstring" id="selectstring" value="" placeholder="Type in an option name">

jquery:

$('#selectspecify').click(function() {
    var selectstring = $('#selectstring').val();

    $('#select2\\[\\] option:contains(' + selectstring + '))').select2('destroy').find('option').prop('selected', 'selected').end().select2() 

});

$(".select2").select2();

有人可以帮我解决这个问题吗？

我制作了一个 jsfiddle 来展示我正在尝试做的事情：http://jsfiddle.net/3ZhWu/2/ 但这显然还不行。

【问题讨论】：

标签： javascript jquery html jquery-select2

【解决方案1】：

试试这个：

$('#selectspecify').click(function() {
    var selectstring = $('#selectstring').val();
    var stringVal = [];
    $('#select2').find('option').each(function(){
        if($(this).is(':contains(' + selectstring + ')')){
                  stringVal.push($(this).val());
        }
        $('#select2').val(stringVal).trigger("change");
    });
});

$(".select2").select2();

参考：http://ivaynberg.github.io/select2/

DEMO

【讨论】：

只是一个问题...如果我只想添加从输入字符串中找到的这些选项，我该怎么做？因为每次我输入“帮助”然后点击按钮它很好..但是如果我想在多列表中添加额外的“BPS”，所有以前的帮助都会消失......我知道这不是我的原始问题的一部分......只是如果你知道.. 非常感谢
@rubberchicken：使用这个jsfiddle.net/kunknown/3ZhWu/4。希望这对您有所帮助。

【解决方案2】：

$('#selectspecify').click(function() {
    $('#select2').select2("val", $('#select2 option:contains(' + selectstring + ')')
    .map(function(){
        return $(this).val();
    }).get());
});

尝试： http://jsfiddle.net/L4ob780b/2/

【讨论】：

【解决方案3】：

$( "option:contains('Help')" );

Reference

【讨论】：

对我不起作用...你想尝试让它与我的 jsfiddle 一起使用吗？
这可能对你有帮助；）（不是一个仅供参考的答案）mobifreaks.com/html5-data-attributes-search-using-jquery

【解决方案4】：

试试这个...

$('#selectspecify').click(function() {
    var selectstring = $('#selectstring').val().toLowerCase();

$('#select2 option').each(function() {

    var inval = $(this).html().toLowerCase();
    console.log(inval);
    if(inval.indexOf(selectstring) != -1) {

        $(this).prop('selected',true);
    }
});
});

这个实际上检查子字符串。所以即使你给'h'。它将选择选项。如果您想要完全相同的字符串，请使用相等检查。

【讨论】：