具有多个具有相同值的条目的 JQuery 选择选项

Question

我有一个程序，有一个下拉菜单，可以从国家列表中进行选择。在此列表中，我选择了将出现在列表顶部的 N 个“重要”国家/地区，后面是所有国家/地区的列表，包括出现在“重要”国家/地区部分的国家/地区名单。

例如：

<select id="id-search-country" name="country"> 
<option value="----">All countries
<option value="AR,,">Argentina       # you can see that this is repeated
<option value="AU,,">Australia
<option value="BR,,">Brazil
<option value="CA,,">Canada
<option value="----">----
<option value="----">All countries
<option value="AF,,">Afghanistan
<option value="AL,,">Albania
<option value="DZ,,">Algeria
<option value="AS,,">American Samoa
<option value="AR,,">Argentina        # repeated here
etc.

当我尝试使用 $(#id-search-country).val(current_country_value) 设置用户当前国家/地区的值时，JQuery 将选择列表中的最后一项，而不是选择顶部的值列表中的。我希望它选择出现在列表顶部的国家/地区值（如果它出现在那里）。

有谁知道我如何配置 JQuery 将当前国家/地区选项设置为“重要”国家/地区（如果 current_country_value 位于列表的该部分），并且仅从列表的其余部分中选择国家/地区（如果未出现）在“重要”部分？

亲切的问候

Answer 1

编辑：在 Reigel 和我在评论中互相较量后，只需一行 jQuery 即可实现：

$("#id-search-country option[value=" + current_country_value + "]:first")[0].selected = true;

Answer 2

$("select").change(function(){
    $("option[value='" + $(this).val() + "']:first").attr("selected","selected");
});

基本上，为此，我使用属性选择器并查找具有刚刚选择的值的最后一个元素。对于重复项，这将是顶部的那个，对于单个项，它将是其本身。然后设置 selected 属性来告诉浏览器应该选择哪个。

示例： http://jsfiddle.net/jonathon/7hgjR/

Answer 3

我想我有答案了。它可能可以缩小一点，但通过一些解决方法，这就是我得到的：

var options = $.makeArray($('option').each(function(){ return $(this).val()}));
var o = new Array();
for(x in options){
    o.push(options[x].value);
}
var x = o.indexOf('AR,,');
$('#id-search-country option').eq(x).attr('selected', 'selected');

我将选项放入一个数组中，然后将值推送到一个新数组（options.indexOf('AR,,') 不会由于某种原因不起作用）；然后根据其索引选择选项，以便选择第一个。

查看实际效果

Answer 4

在选择国家/地区之前，您可以尝试从列表底部（完整列表）中删除“重要”国家/地区。然后将它们添加回正确的位置。

所选项目应保持不变。

Answer 5

如果所选值在列表中，则上面给出的可接受的解决方案效果很好，但如果未找到它，则会在 google crome 中导致错误，导致下拉菜单完全空白。修复如下：

first_selector = $("#id-search-country option[value=" + current_country_value +  "]:first"); 
if (first_selector.length) { // check that the selector was found 
    first_selector[0].selected = true; 
} else { 
    $("#id-search-country").val(current_country_value);  // fallback to default JQuery method
}