Выбор индекса 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".

Ответ 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&nbsp;&nbsp; <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 - выбранный индекс как целое.