JQuery Set Select Index

Question

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

<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> 

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

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

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

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

Спасибо!

Answer 1

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

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

также увидеть, если это поможет вам:

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

Answer 2

ПРИМЕЧАНИЕ: ответ зависит от 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"))

Answer 3

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

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

Ваш список выбора:

<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'); 

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

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

Answer 4

NB:

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

неверен, почтительность массива получает вас объект DOM, а не объект JQuery, так что она не будет выполнена с TypeError, например, в FF с: «$ ('# переключателем option ') [3] .attr() не является функцией. "

Answer 5

В 1.4.4 вы получите ошибку: $ ("# переключатель вариант") [3] .attr не является функцией

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

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

Answer 6

Еще проще:

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

Answer 7

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

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

"Uncaught TypeError: Объект # не имеет метод 'Аттрибут'"

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

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

Answer 8

Для уточнения Марк-х и ответы Джона Kugelman, вы можете использовать:

$('#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]) более эффективен (см. test case).

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

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

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

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

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

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

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

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

Answer 9

//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); 
     } 
    }); 

Answer 10

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

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

Answer 11

Коротко:

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

, где индекс выбранного индекса в виде целого числа.

Answer 12

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

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

Answer 13

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

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

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

Answer 14

Важно понимать, что 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, иначе он не будет работать.

Answer 15

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

Например:

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

The Второе событие выбирает опцию по умолчанию с помощью какой-либо функции, таких как Вал() и т.д.

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

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

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

Answer 16

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

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

Answer 17

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

код:

<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&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong> 

Answer 18

# 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(); 

Answer 19

Надеется, что это может помочь Too

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

Answer 20

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

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

Here is a jsfiddle demo с два выпадающих списка с использованием одного для установки другого:

<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 если то, что вы хотите это «выбран» атрибут опции тега (here is the fiddle):

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

Answer 21

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

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

Example on jsfiddle

Answer 22

Попробуйте следующее:

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

В конце концов, нажмите a.событие изменения:

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

Answer 23

У меня всегда были проблемы с опорой («Selected»), следующий всегда работал для меня:

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