如何获取 Select2 下拉列表中的所有值？

Posted 2023-05-07

【中文标题】如何获取 Select2 下拉列表中的所有值？

【英文标题】：How to get all the values in a Select2 dropdown?

【发布时间】：2013-04-17 17:58:55

【问题描述】：

我们如何获取 jQuery Select2 下拉插件中的所有元素。

我已将 Select2 应用于输入类型 = hidden，然后使用 Ajax 填充它。

现在，我需要获取下拉列表中出现的所有值。

这是一个输入字段。

<input type="hidden" id="individualsfront" name="individualsfront" style="width:240px" value="" data-spy="scroll" required />

我在这个输入字段中应用了这个

$("#individualsfront").select2(
    multiple: true,
    query: function (query)
        var data = results: [];
        $.each(yuyu, function()
            if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 )
                data.results.push(id: this.id, text: this.text );
            
        );
        query.callback(data);
    
);

yuyu 是来自一些 AJAX 调用并填充 Select2 的 json。

现在我想在其他代码中获取 Select2 中的所有值。

【问题讨论】：

你在说this？？

是的，我说的是 Select2 插件。你在链接中提到的。

【参考方案1】：

我试图自己解决这个问题，发现您至少可以在 select2 中获得选项。

var options = $("#dropdown").find("option")
var optionsText = $("#dropdown").find("option[value='1']").text()

【参考方案2】：

选项1：你可以直接使用data对象

var results = [];
$("#individualsfront").select2(
    multiple: true,
    query: function (query)
        var data = results: [];
        $.each(yuyu, function()
            if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 )
                data.results.push(id: this.id, text: this.text );
            
        );

        results = data.results; //<=====  
        query.callback(data);
    
);

并像这样使用它，例如：

$('#individualsfront').on('open',function()
    $.each(results, function(key,value)
        console.log("text:"+value.text);
    );
);

选项 2： 请求该功能并使用（临时）类似：

$('#individualsfront').on('open',function()
    $(".select2-result-label").each(function()
        
            console.log($(this).text());
        )
    );
);

http://jsfiddle.net/ouadie/qfchH/1/ 选项 3：您可以使用 .select2("data");，但只有在没有选定元素时才会返回所有元素。

var arrObj = $("#individualsfront").select2("data");
for each(yuyu in arrObj)

   console.log("id: "+yuyu.id+ ", value: "+yuyu.text);

【讨论】：

$("#yourselect").select2("data");

Ouadie 它只是给了我所选项目的值，而不是 select2 的所有元素。

@Ouadie your option3 如果没有选定元素，则返回 null

@Sam-Selikoff 我上次尝试它返回所有元素，我将删除此选项

有没有其他方法可以得到它，只需选择元素（即不响应事件）？

【参考方案3】：

function select2Options($elementSelect2) 
    var data = [],
        adapter = $elementSelect2.data().select2.dataAdapter;
    $elementSelect2.children().each(function () 
        if (!$(this).is('option') && !$(this).is('optgroup')) 
            return true;
        
        data.push(adapter.item($(this)));
    );
    return data;