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

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

Спасибо!

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

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

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

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

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

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

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

Еще проще:

$('#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("<option value='2'>new option</option>");

# 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

* Однако, чтобы выбрать несколько параметров, ваш <select>элемент должен иметь 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').val($('#selectBox option').eq(2).val());

Пример на jsfiddle

NB:

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

неверно, массив deference возвращает вам объект dom, а не объект jquery, поэтому он завершится с ошибкой TypeError, например, в FF с: "$ ('# selectBox option') [3] .attr () не является функцией «.

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

$('#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/

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

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

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

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

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

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

Где #nameнаходится id выбора и idxзначение опции, которую вы хотите выбрать.

Чистый 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');

//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:eq(position_index)').prop('selected', true).trigger('change');

Пример с идентификатором select = selectA1 и position_index = 0 (опция frist в select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

Вы можете установить значение переменной 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&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

Коротко:

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

где индекс - это выбранный индекс как целое число.