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 ,,'）由于某种原因不起作用）;然后根据其索引选择该选项，以便选择第一个选项。

See it in action

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
}

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

5 个答案: