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

Question

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

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

然而，试图通过顺序进行选择，完全脱离了我。什么与正常下拉工作，但不是选择二的一些例子：

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

我之所以需要这个是必须默认的选择，这不是第一位的，因为选择二使用第一个选项（索引：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（大量的旧代码的待更新） - 我会后在他们的请求选择二

UPDATE的将来版本： 这里的功能是什么样子

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

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

试试这个。

Answer 2

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

Answer 3

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

所以，你可以这样做：

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

---

但这不会如果选择的指数是指不具有独特价值的选择工作。当Select2控件自行更新时，它会查看底层<select>元素的值，而不是其选定的索引。

当然，你不能选择的值非唯一选项，但你可以尝试使用选择二“数据”的方法，像这样：

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

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

jsfiddle

但对于你的限制的情况下，其中唯一的非唯一选项是两个选择具有空值，和其中第一个不具有文本（即，空体），以上则代码出现上班。

我假设你指定了“allowClear”选项设置为true的“占位符”选项。否则用户不能切换回空选项。 （那么，为什么有的话）。

jsfiddle