Опция выбора JQuery с несколькими записями с одинаковым значением - PullRequest
2 голосов
/ 16 декабря 2010

У меня есть программа с выпадающим меню для выбора из списка стран. В этом списке я выбрал 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 находится в этой части списка) и выбрать страну только из оставшейся части списка, если она не появился в "важной" части?

С уважением

Ответы [ 5 ]

6 голосов
/ 16 декабря 2010

Редактировать: После того, как Рейгель и я одолели друг друга в комментариях, это может быть достигнуто одной строкой jQuery:

$("#id-search-country option[value=" + current_country_value + "]:first")[0].selected = true;
2 голосов
/ 16 декабря 2010
$("select").change(function(){
    $("option[value='" + $(this).val() + "']:first").attr("selected","selected");
});

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

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

1 голос
/ 16 декабря 2010

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

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 ,,') по какой-то причине не работает); затем выбрал опцию на основе его индекса, так что будет выбран первый.

Посмотреть в действии

0 голосов
/ 17 декабря 2010

Приведенное выше принятое решение прекрасно работает, если выбранное значение находится в списке, но если оно не найдено, оно вызывает ошибку в 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
}
0 голосов
/ 16 декабря 2010

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

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

...