Выбор индекса jQuery
У меня есть поле выбора:
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
</select>
Я хотел бы установить одну из опций как "выбранную" на основе выбранного индекса.
Например, если я пытаюсь установить "Number 3", я пытаюсь это сделать:
$('#selectBox')[3].attr('selected', 'selected');
Но это не работает. Как я могу установить опцию, выбранную на основе этого индекса, используя jQuery?
Спасибо!
Ответы
Ответ 1
ПРИМЕЧАНИЕ: ответ зависит от 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)
работает также для этого примера, но нечисловые значения должны быть строками, поэтому я выбрал строку для согласованности.
(например, <option value="hello">Number3</option>
требуется использовать .val("hello")
)
Ответ 2
Это также может быть полезно, поэтому я подумал, что добавлю его здесь.
Если вы хотите выбрать значение на основе значения элемента, а не индекса этого элемента, вы можете сделать следующее:
Ваш избранный список:
<select id="selectBox">
<option value="A">Number 0</option>
<option value="B">Number 1</option>
<option value="C">Number 2</option>
<option value="D">Number 3</option>
<option value="E">Number 4</option>
<option value="F">Number 5</option>
<option value="G">Number 6</option>
<option value="H">Number 7</option>
</select>
jQuery:
$('#selectBox option[value=C]').attr('selected', 'selected');
Забастовкa >
$('#selectBox option[value=C]').prop('selected', true);
Выбранный элемент будет теперь "Number 2".
Ответ 3
Попробуйте это вместо:
$("#selectBox").val(3);
также, посмотрите, поможет ли это вам:
http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/
Ответ 4
Еще проще:
$('#selectBox option')[3].selected = true;
Ответ 5
# 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("<option value='2'>new option</option>");
# Remove an item
$("#select option:eq(0)").remove();
Ответ 6
Важно понимать, что 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
* Однако для выбора нескольких параметров ваш элемент <select>
должен иметь атрибут MULTIPLE
, иначе он не будет работать.
Ответ 7
У меня всегда были проблемы с prop ('selected'), для меня всегда работало следующее:
//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');
Ответ 8
Попробуйте следующее:
$('select#mySelect').prop('selectedIndex', optionIndex);
В конце концов, запустите событие .change:
$('select#mySelect').prop('selectedIndex', optionIndex).change();
Ответ 9
Надеюсь, это могло бы помочь Слишком
$('#selectBox option[value="3"]').attr('selected', true);
Ответ 10
В 1.4.4 вы получите сообщение об ошибке: $( "# selectBox option" ) [3].attr не является функцией
Это работает: $('#name option:eq(idx)').attr('selected', true);
Где #name
- это идентификатор выбора, а idx
- это значение параметра, которое вы хотите выбрать.
Ответ 11
Чтобы уточнить ответы Марка и Джона Кугельмана, вы можете использовать:
$('#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;
То же самое касается флажков.
Ответ 12
Атрибут pure javascript selectedIndex - это правильный путь, потому что он чистый javascript и работает кросс-браузер:
$('#selectBox')[0].selectedIndex=4;
Вот демон jsfiddle с двумя выпадающими списками, использующими один для установки другого:
<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
</select>
Вы также можете вызвать это перед изменением selectedIndex, если вам нужен атрибут "selected" в теге option (вот скрипка):
$('#selectBox option').removeAttr('selected')
.eq(this.selectedIndex).attr('selected','selected');
Ответ 13
выберите третий вариант
$('#selectBox').val($('#selectBox option').eq(2).val());
Пример jsfiddle
Ответ 14
Примечание:
$('#selectBox option')[3].attr('selected', 'selected')
неверно, аргумент массива получает объект dom, а не объект jquery, поэтому он терпит неудачу с помощью TypeError, например, в FF: "$ ('# selectBox option" ) [3].attr() а не функция ".
Ответ 15
//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);
}
});
Ответ 16
$('#selectBox option').get(3).attr('selected', 'selected')
При использовании вышеизложенного я продолжал получать ошибки в webkit (Chrome), говоря:
"Uncaught TypeError: Object # не имеет метода 'attr'"
Этот синтаксис останавливает эти ошибки.
$($('#selectBox option').get(3)).attr('selected', 'selected');
Ответ 17
Если вы просто хотите выбрать элемент, основанный на конкретном свойстве элемента, тогда параметр jQuery типа [prop = val] получит этот элемент. Теперь мне не нужен индекс, который я просто хотел получить по его значению.
$('#mySelect options[value=3]).attr('selected', 'selected');
Ответ 18
Мне нужно решение, которое не имеет жестко закодированных значений в файле js; используя selectedIndex
. Большинство из этих решений не удалось запустить один браузер. Это, похоже, работает в FF10 и IE8 (может ли кто-то еще тестировать в других версиях)
$("#selectBox").get(0).selectedIndex = 1;
Ответ 19
Выберите элемент на основе значения в списке выбора (особенно, если значения параметра имеют пробел или странный символ в нем), просто сделав следующее:
$("#SelectList option").each(function () {
if ($(this).val() == "1:00 PM")
$(this).attr('selected', 'selected');
});
Кроме того, если у вас есть выпадающий список (в отличие от мульти-select), вы можете сделать break;
, чтобы вы не перенесли первое значение, которое было перезаписано.
Ответ 20
У меня была такая же проблема.
Сначала вам нужно пройти через события (то есть какое событие происходит в первую очередь).
Например:
Первое событие генерирует поле выбора с параметрами.
Второе событие выбирает параметр по умолчанию с помощью любой функции, такой как val() и т.д.
Вы должны убедиться, что Второе событие должно произойти после Первого события.
Для этого возьмите две функции: generateSelectbox() (для выбора поля выбора) и selectDefaultOption()
Вам нужно убедиться, что selectDefaultOption() следует вызывать только после выполнения generateSelectbox()
Ответ 21
Вы также можете инициировать несколько значений, если ваш selectbox имеет значение:
$('#selectBox').val(['A', 'B', 'C']);
Ответ 22
вы можете установить значение переменной selectoption динамически, а также будет выбран параметр. Вы можете попробовать следующий код
код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
$(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 id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
</select> <br>
<strong>Select <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>
Ответ 23
Я часто использую триггер ("изменение"), чтобы заставить его работать
$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');
Пример с идентификатором select = selectA1 и position_index = 0 (опция frist в select):
$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');
Ответ 24
Коротко:
$("#selectBox").attr("selectedIndex",index)
где index - выбранный индекс как целое.