如何在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）来填写提示，所以我想默认使用索引：1（它们可以有很多选择）不同的值，因此我不能只通过一个值设置所选选项-它必须是序数。

更新：问题可能出在这里（所有选择的值均为空以及所需的空选项）-可能会感到困惑。

<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