Установите выбранный индекс выпадающего с помощью jQuery

165

Как установить индекс раскрывающегося списка в jQuery, если способ нахождения элемента управления выглядит следующим образом:

$("*[id$='" + originalId + "']")

Я делаю это таким образом, потому что я создаю элементы управления динамически и, так как идентификаторы меняются при использовании веб-форм, я нашел это как обходной путь, чтобы найти мне некоторые элементы управления. Но как только у меня есть объект jQuery, я не знаю, как установить выбранный индекс в 0 (ноль).

jquery унция
источник

352

Прежде всего - этот селектор довольно медленный. Он будет сканировать каждый элемент DOM в поисках идентификаторов. Если вы можете назначить класс элементу, это будет меньше сказываться на производительности.

$(".myselect")

Чтобы ответить на ваш вопрос, есть несколько способов изменить значение элементов select в jQuery.

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

gnarf
источник

Есть ли лучший способ сделать это? Я подумал, что он будет сканировать весь DOM в поисках соответствия идентификатору, но так как я новичок в jQuery, как я понял, давайте сделаем это, а затем посмотрим, есть ли лучший способ сделать это. Любой совет будет оценен.

унция

Да - если вы можете назначить класс элементу (элементам), который вам нужно найти, это будет намного более быстрый селектор.

gnarf

@gnarf не быстрее идентификаторы?

KBN

#an-idбыстрее, но *[id$=ends-with]намного медленнее, вот что означает «назначить класс элементу»

gnarf

Как насчет того, если у меня есть несколько ASP.net DropDownList с другим выбранным значением индекса?

SearchForKnowledge

106

Просто нашел это, это работает для меня, и мне лично легче читать.

Это установит фактический индекс так же, как вариант ответа gnarf № 3.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Это раньше не работало, но работает сейчас ... см. Ошибку: http://dev.jquery.com/ticket/1474

добавление

Как рекомендуется в комментариях использовать:

$("select#elem").prop('selectedIndex', 0);

4imble
источник

30

А с jQuery 1.6 вы должны использовать .prop('selectedIndex', 0);независимо от того, .attr()работает или нет :)

gnarf

1

Правильно, это на самом деле может не работать в 1.7. см. принятый ответ: stackoverflow.com/questions/8010664/…

4imble

+1 за добавление. Мой старый код сломался из-за этой проблемы

BiLaL

11

Я пишу этот ответ в 2015 году, и по какой-то причине (возможно, более старые версии jQuery) ни один из других ответов не сработал для меня. Я имею в виду, они изменяют выбранный индекс, но на самом деле это не отражается на фактическом выпадающем списке.

Вот еще один способ изменить индекс и сделать так, чтобы он отражался в раскрывающемся списке:

$('#mydropdown').val('first').change();

PaulG
источник

1

Спасибо за Ваш ответ. Только этот ответ работает для меня

Вирадж Дхамал

Кроме того, в 2015 году у меня не было проблем с prop('selectedIndex', ...);(проверено с Chrome и Firefox) изменением выбора.

Ламбарт,

2

Что бы это ни стоило, следует отметить, что здесь вы делаете по-другому, вызывая changeсобытие в раскрывающемся списке, что также может быть полезным исправлением / обходным решением для людей, которые изменяют выбор, вызывая prop('selectedIndex', ...), а не val(...). Возможно, проблема заключалась в том, что вы слушаете changeсобытие, и это то, что не работает для вас? Это правда, что простое изменение property не

приведет к возникновению

9

я использую

$('#elem').val('xyz');

выбрать элемент option, который имеет значение = 'xyz'

диджеев
источник

9

Код JQuery:

$("#sel_status").prop('selectedIndex',1);

JSP код:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

сатья
источник

3

Вы хотите получить значение первой опции в элементе select.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

MacAnthony
источник

3

Выбрать 2-й вариант

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Здесь мы добавляем триггер («изменение»), чтобы вызвать событие.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

Джаррод
источник

это гораздо лучший ответ.

Бен Дехган

1

$("[id$='" + originalId + "']").val("0 index value");

установит его на 0

Джош Майн
источник

1

Выберите 4-й вариант

$('#select').val($('#select option').eq(3).val());

пример на jsfiddle

dabar
источник

2

правильное решение ... для конкурса код-обфускация! :)

Ламбарт,

Установите выбранный индекс выпадающего с помощью jQuery

Ответы:

добавление