У мене вибране поле:

<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атрибут, інакше він не працюватиме.

У мене завжди були проблеми з підтримкою ("вибрано"), для мене завжди працювало таке:

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

виберіть 3-й варіант

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

Приклад на jsfiddle

Примітка:

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

невірно, деференція масиву отримує вам об’єкт 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 option") [3] .attr не є функцією

Це працює: $('#name option:eq(idx)').attr('selected', true);

Де #nameвибрано ідентифікатор і 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>

Ви також можете зателефонувати цьому перед тим, як змінити selectIndex, якщо потрібний атрибут "selected" у тезі параметрів ( ось скрипка ):

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

Приклад з id select = selectA1 та position_index = 0 (параметр frist у виборі):

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

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

Під час використання вищезазначеного я постійно отримував помилки у веб-програмі (Chrome):

"Uncaught TypeError: У об'єкта # немає методу" 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');

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

Наприклад:

перша подія генерує поле вибору з варіантами.

друга подія вибирає опцію по замовчуванням з допомогою якої - небудь функції , такі як вал () і т.д.

Ви повинні переконатися, що Друга подія повинна відбутися після Першої події .

Щоб досягти цього, візьміть дві функції, скажімо, створити поле SelectSelectbox () (для генерації поля вибору) та selectDefaultOption ()

Вам потрібно переконатися, що selectDefaultOption () слід викликати лише після виконання GeneSelectbox ()

Ви також можете вводити кілька значень, якщо ваш перемикач вибраний мультиплікацією:

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

ви можете динамічно встановити значення змінної вибору, а також буде обрана опція. Ви можете спробувати наступний код

код:

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

де index - це вибраний індекс як ціле число.