如何在javascript或jQuery中设置select2（版本3.5）下拉列表的selectedindex

Question

简单的问题，但还没有答案。 是否可以通过序数设置Select2下拉列表的selectedIndex？ 我正在使用Select2版本3.5.2，并且发现使用以下值的选定项目非常容易：

$(elem).select2('val','my value',false);

然而，尝试通过序数进行选择，完全逃脱了我。 一些适用于普通下拉列表的示例，但不适用于Select2：

$(elem + " option")[1].selected = true; //no worky
$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
$(elem).prop({ selectedIndex: 1 });//no worky

我需要这个的原因是有一个默认选择不是第一个，因为Select2使用第一个选项（索引：0）来填充提示，所以我想默认为Index：1（他们可以有很多不同的值，所以我不能只通过一个值设置所选的选项 - 它必须是一个序数。

更新：问题可能在这里（所有ALL选择的值都是空的，以及所需的空选项） - 它可能会混淆。

<option selected="selected" value=""></option>
<option value="">All Sizes</option>
<option value="6ad0a51e-e58c-4431-914d-b3f1a6b2c08e">18in X 18in</option>
<option value="a00b492e-08fa-4824-ad86-9ffb8a510be2">9.75in X 39in</option>
<option value="423b2a4e-2876-4969-84e3-3601e3fab524">19.7in X 19.7in</option>
<option value="9d4f4f13-47f6-422c-bbaf-f0911b5c156c">12in x 36in</option>
<option value="d417f0bc-d1fe-4d6b-bf41-aa081907254c">22in X 22in</option>
<option value="d1dc3ca6-fc3c-47f8-8b71-80219c8fd98b">24in X 24in</option>
<option value="c92c91a3-dfdb-4240-83e2-c08771748e47">18in x 36in</option>
<option value="4741d76f-628f-4ca0-a871-dfe2c4986e66">19.7in X 39.4in</option>
<option value="f70791ba-c56a-403b-b23e-fb2e8869ba07">36in X 36in</option>
<option value="7f70b445-a890-4838-a9f5-4c3100643fdd">39in X 39in</option>

我将给第一个选项一个值（“所有尺寸”，“所有颜色”，“仅库存商品”，“仅限销售类别”等），并将它们设置为与数据库中的“ - ”相同的值作为第一项（这样，我不需要比较）。 设置selectedIndex（要更新的旧代码的批次）仍然会很好 - 我会将它发布在他们对Select2的未来修订版的请求中

更新：这是函数的样子

function setDD(elem, qs) {
    var q = QueryString(qs);
    if (!(typeof q === "undefined")) {
        if (q === '') {
            //$(elem + " option")[1].selected = true; //no worky
            //$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
            //$(elem).prop({ selectedIndex: 1 });//no worky
            //$(elem).find("option:eq(1)").prop("selected", "selected"); //no worky
            //$(elem + " option:eq(1)").prop("selected", "selected");  //no worky
            //$(elem).prop('selectedIndex', 1).change(); //no worky
        } else {
            $(elem).select2('val', q, false);
        };
    }; //else leave the dropdown at its default to show the hint (until user actually makes a selection)
};

Answer 1

虽然Select2不提供按索引选择的方法，但您可以按索引设置基础<select>元素的值。 当然，无论何时更改底层<select>元素的值，都需要触发其change事件，以便Select2控件知道它需要更新自身才能匹配。

所以你可以这样做：

$(elem).prop('selectedIndex', 1).change();

---

但是，如果所选索引引用的选项不具有唯一值，则此操作无效。 当Select2控件自行更新时，它会查看底层<select>元素的值，而不是其选定的索引。

当然，您不能按值选择非唯一选项，但您可以尝试使用Select2“data”方法，如下所示：

var $option = $(elem).children().eq(1);
$(elem).select2('data', { id: $option.val(), text: $option.text() });

在一般情况下，我看到的一个问题是，当打开Select2时（即显示下拉列表），突出显示的选项是列表中第一个具有非唯一值的选项。 如果用户然后按Tab键，该选项将成为选定的选项。

的jsfiddle

但是对于你的有限情况，唯一的非唯一选项是两个带空值的选项，并且第一个没有文本（即空体），那么上面的代码似乎可行。

我假设您指定“占位符”选项，并将“allowClear”选项设置为true 。 否则，用户永远不能切换回空选项。 （那为什么要这样。）

的jsfiddle

Answer 2

$('select').val('US'); // Change the value or make some change to the internal state
$('select').trigger('change.select2'); // Notify only Select2 of changes

试试这个。

Answer 3

jQuery Select2控件不允许通过它的序数索引选择选项。 唯一的解决方案是按其值设置选定的选项（至少在版本3.5中）。 我讨厌这个答案！