Выбор индекса jQuery
У меня есть поле выбора:
Number 0 Number 1 Number 2 Number 3 Number 4 Number 5 Number 6 Number 7
Я хотел бы установить один из вариантов как «выбранный» на основе его выбранного индекса.
Например, если я пытаюсь установить «Number 3», я пытаюсь это сделать:
- jQuery: выбрать class элемента и идентификатор одновременно?
- Селекторы jQuery с переменными
- Селектор jQuery: Id заканчивается?
- Фильтр jquery имеет +
- Разница между CSS-селектором и фильтром jQuery?
$('#selectBox')[3].attr('selected', 'selected');
Но это не работает. Как я могу установить опцию, выбранную на основе ее индекса, используя jQuery?
Благодаря!
- Найти все элементы на основе ids с помощью regex в селекторе jQuery
- jQuery hasClass () - проверьте несколько classов
- jQuery выбирает атрибут с использованием операторов AND и OR
- jQuery или CSS-селектор, чтобы выбрать все идентификаторы, начинающиеся с некоторой строки
- Изменение CSS-элемента дочернего элемента при зависании родительского элемента
- jQuery как найти элемент на основе значения атрибута данных?
- jQuery ИЛИ Селектор?
- Должны ли все события 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;
Еще один жизненно важный момент:
Атрибут «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 – выбранный индекс как целое.