Выбор индекса jQuery

У меня есть поле выбора:

 Number 0 Number 1 Number 2 Number 3 Number 4 Number 5 Number 6 Number 7  

Я хотел бы установить один из вариантов как «выбранный» на основе его выбранного индекса.

Например, если я пытаюсь установить «Number 3», я пытаюсь это сделать:

 $('#selectBox')[3].attr('selected', 'selected'); 

Но это не работает. Как я могу установить опцию, выбранную на основе ее индекса, используя jQuery?

Благодаря!

ПРИМЕЧАНИЕ . Ответ зависит от jQuery 1.6.1+

 $('#selectBox :nth-child(4)').prop('selected', true); // To select via index $('#selectBox option:eq(3)').prop('selected', true); // To select via value 

Спасибо за комментарий, .get не будет работать, так как он возвращает элемент DOM, а не jQuery. Имейте в виду, что функция .eq может использоваться и вне селектора, если вы предпочитаете.

 $('#selectBox option').eq(3).prop('selected', true); 

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

 $("#selectBox").val("3"); 

Примечание: .val(3) работает для этого примера, но нечисловые значения должны быть строками, поэтому я выбрал строку для согласованности.
(например, требует использования .val("hello") )

Это также может быть полезно, поэтому я подумал, что добавлю его здесь.

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

Ваш избранный список:

  

JQuery:

 $('#selectBox option[value=C]').attr('selected', 'selected'); 

 $('#selectBox option[value=C]').prop('selected', true); 

Выбранный элемент будет теперь «Number 2».

Попробуйте это вместо этого:

 $("#selectBox").val(3); 

также, посмотрите, поможет ли это вам:

http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/

Еще проще:

 $('#selectBox option')[3].selected = true; 
 # Set element with index $("#select option:eq(2)").attr("selected", "selected"); # Set element by text $("#select").val("option Text").attr("selected", "selected"); 

если вы хотите выбрать верхние пути для выбора набора, вы можете использовать
$('#select option').removeAttr('selected'); для удаления предыдущих выборок.

 # Set element by value $("#select").val("2"); # Get selected text $("#select").children("option:selected").text(); # use attr() for get attributes $("#select option:selected").text(); # use attr() for get attributes # Get selected value $("#select option:selected").val(); $("#select").children("option:selected").val(); $("#select option:selected").prevAll().size(); $("option:selected",this).val(); # Get selected index $("#select option:selected").index(); $("#select option").index($("#select option:selected")); # Select First Option $("#select option:first"); # Select Last Item $("#select option:last").remove(); # Replace item with new one $("#select option:eq(1)").replaceWith(""); # Remove an item $("#select option:eq(0)").remove(); 

Важно понимать, что val() для элемента select возвращает значение выбранного параметра, но не число элементов, как selectedIndex в javascript.

Чтобы выбрать параметр со value="7" вы можете просто использовать:

 $('#selectBox').val(7); //this will select the option with value 7. 

Чтобы отменить выбор, используйте пустой массив:

 $('#selectBox').val([]); //this is the best way to deselect the options 

И, конечно, вы можете выбрать несколько вариантов *:

 $('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7 

* Однако для выбора нескольких параметров ваш элемент должен иметь атрибут MULTIPLE , иначе он не будет работать.

У меня всегда были проблемы с prop (‘selected’), для меня всегда работало следующее:

 //first remove the current value $("#selectBox").children().removeAttr("selected"); $("#selectBox").children().eq(index).attr('selected', 'selected'); 

Попробуй это:

 $('select#mySelect').prop('selectedIndex', optionIndex); 

В конце концов, запустите событие .change:

 $('select#mySelect').prop('selectedIndex', optionIndex).change(); 

Надеюсь, это может помочь слишком

 $('#selectBox option[value="3"]').attr('selected', true); 

Чтобы уточнить ответы Марка и Джона Кугельмана, вы можете использовать:

 $('#selectBox option').eq(3).attr('selected', 'selected') 

get() не будет работать, если он используется указанным способом, поскольку он получает объект DOM, а не объект jQuery, поэтому следующее решение не будет работать:

 $('#selectBox option').get(3).attr('selected', 'selected') 

eq() получает фильтры, которые jQuery задает для элемента с указанным индексом. Это яснее, чем $($('#selectBox option').get(3)) . Это не так эффективно. $($('#selectBox option')[3]) более эффективен (см. тестовый пример ).

Однако вам действительно не нужен объект jQuery. Это сделает трюк:

 $('#selectBox option')[3].selected = true; 

http://api.jquery.com/get/

http://api.jquery.com/eq/

Еще один жизненно важный момент:

Атрибут «selected» – это не то, как вы указываете выбранный переключатель (по крайней мере, в Firefox и Chrome). Используйте атрибут «checked»:

 $('#selectBox option')[3].checked = true; 

То же самое касается флажков.

В 1.4.4 вы получаете сообщение об ошибке: $ (“# selectBox option”) [3] .attr не является функцией

Это работает: $('#name option:eq(idx)').attr('selected', true);

Где #name выбирает id, а idx – это значение параметра, которое вы хотите выбрать.

Чистый атрибут javascript selectedIndex – это правильный путь, потому что он является чистым javascript и работает кросс-браузер:

 $('#selectBox')[0].selectedIndex=4; 

Вот демон jsfiddle с двумя выпадающими списками, использующими один для установки другого:

   

Вы также можете вызвать это перед изменением selectedIndex, если то, что вы хотите, является атрибутом «selected» в теге option ( вот скрипка ):

 $('#selectBox option').removeAttr('selected') .eq(this.selectedIndex).attr('selected','selected'); 

выберите третий вариант

 $('#selectBox').val($('#selectBox option').eq(2).val()); 

Пример по jsfiddle

NB:

 $('#selectBox option')[3].attr('selected', 'selected') 

неверно, аргумент массива получает объект dom, а не объект jquery, поэтому он терпит неудачу с помощью TypeError, например, в FF с: «$ (‘# selectBox option») [3] .attr () не является функцией «.

 //funcion para seleccionar por el text del select var text = ''; var canal = ($("#name_canal").val()).split(' '); $('#id_empresa option').each(function(i, option) { text = $('#id_empresa option:eq('+i+')').text(); if(text.toLowerCase() == canal[0].toLowerCase()){ $('#id_empresa option:eq('+i+')').attr('selected', true); } }); 
 $('#selectBox option').get(3).attr('selected', 'selected') 

При использовании вышеизложенного я продолжал получать ошибки в webkit (Chrome), говоря:

«Uncaught TypeError: Object # не имеет метода« attr »

Этот синтаксис останавливает эти ошибки.

 $($('#selectBox option').get(3)).attr('selected', 'selected'); 

Выберите элемент на основе значения в списке выбора (особенно, если значения параметра имеют пробел или странный символ в нем), просто сделав следующее:

 $("#SelectList option").each(function () { if ($(this).val() == "1:00 PM") $(this).attr('selected', 'selected'); }); 

Кроме того, если у вас есть выпадающий список (в отличие от мульти-select), вы можете сделать break; поэтому вы не получите замену первого значения.

Мне нужно решение, которое не имеет жестко закодированных значений в файле js; используя selectedIndex . Большинство из этих решений не удалось запустить один браузер. Это, похоже, работает в FF10 и IE8 (может ли кто-то еще тестировать в других версиях)

 $("#selectBox").get(0).selectedIndex = 1; 

Если вы просто хотите выбрать элемент, основанный на конкретном свойстве элемента, тогда параметр jQuery типа [prop = val] получит этот элемент. Теперь я не забочусь об индексе, который мне просто нужен, по его значению.

 $('#mySelect options[value=3]).attr('selected', 'selected'); 

Я столкнулся с такой же проблемой. Сначала вам нужно пройти через события (т.е. какое событие происходит в первую очередь).

Например:

Первое событие генерирует поле выбора с параметрами.

Второе событие выбирает параметр по умолчанию, используя любую функцию, такую ​​как val () и т. Д.

Вы должны убедиться, что второе событие должно произойти после первого события .

Для этого возьмите две функции: скажем, generateSelectbox () (для выбора поля выбора) и selectDefaultOption ()

Вы должны убедиться, что selectDefaultOption () должен вызываться только после выполнения функции generateSelectbox ()

Вы можете также инициализировать несколько значений, если ваш selectbox является множителем:

 $('#selectBox').val(['A', 'B', 'C']); 

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

код:

   

  $(function(){ $('#allcheck').click(function(){ // $('#select_option').val([1,2,5]);also can use multi selectbox // $('#select_option').val(1); var selectoption=3; $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected'); }); }); 

HTML-код:

   
Select   click for select option

Коротко:

$("#selectBox").attr("selectedIndex",index)

где index – выбранный индекс как целое.

  • Какие селектора CSS3 действительно поддерживают jQuery, например: nth-last-child ()?
  • Как я могу определить, возвращает ли селектор null?
  • Как я могу выбрать элемент с несколькими classами в jQuery?
  • jQuery выбрать по classу VS выбрать по атрибуту
  • Более чистый способ выбора нескольких возможных значений атрибутов?
  • Как получить доступ к свойствам стиля псевдоэлементов с помощью jQuery?
  • Выделение селектора jQuery
  • Элемент или class LIKE для jQuery?
  • поиск jQuery и контекст
  • addID в jQuery?
  • Как выбрать элементы, которые не имеют определенного дочернего элемента с JQuery
  • Давайте будем гением компьютера.