Функция выбора 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. 

Когда я пытаюсь установить значение пользователей текущей страны с помощью $ (# Ид-поиска местности) .val (current_country_value), JQuery будет выбрать последний элемент в в отличие от выбора значения в верхней части списка. Я бы предпочел, чтобы он выбрал значение страны, которое появляется в верхней части списка, если оно появляется там.

Кто-нибудь знает, как я могу настроить JQuery, чтобы установить параметр текущей страны в «важную» страну (если current_country_value находится в этой части списка) и выбрать только страну из оставшейся части списка, если он не появился в «важной» части?

С наилучшими пожеланиями

Answer 1

Edit: После Reigel и я один повысил друг друга в комментариях, это может быть достигнуто с помощью одной строки JQuery:

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

Answer 2

Вы можете попытаться удалить «важные» страны из нижней части списка (полный список), прежде чем выбрать страну. Затем добавьте их обратно в правильные места.

Выбранный элемент должен оставаться прежним.

Answer 3

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

В принципе, для этого я использую селектор атрибута и посмотреть для последнего элемента со значением, которое только что было выбрано. Для дубликатов это будет тот, что находится наверху и для одиночных, он будет сам. Затем установите атрибут selected, чтобы сообщить браузеру, который должен быть выбран.

Пример: http://jsfiddle.net/jonathon/7hgjR/

Answer 4

Я думаю, что у меня есть ответ. Это может быть в состоянии похудел немного, но с несколько обходных путей, вот что я получил:

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 5

Принятое решение приведенное выше отлично работает, если выбранное значение в списке, но если он не нашел, что это приводит к ошибке в Google Крома, что приводит к раскрывающемся меню быть полностью гасятся , Исправление заключается в следующем:

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 
}