javascript - 如何在 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 future 修订的请求中

更新:该函数如下所示

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“数据”方法，如下所示:

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

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

jsfiddle

但是对于您有限的情况，唯一的非唯一选项是两个具有空值的选项，并且第一个选项没有文本(即空正文)，那么上面的代码似乎可以工作。

我假设您正在指定“占位符”选项，并将“allowClear”选项设置为 true 。否则用户永远无法切换回空选项。 (那么为什么要有它。)

jsfiddle