Как выбрать конкретную опцию в элементе SELECT в jQuery?
Если вы знаете индекс, значение или текст. также, если у вас нет идентификатора для прямой ссылки.
Этот, это и это - все полезные ответы.
Пример разметки
<div class = "selDiv">
<select class = "opts">
<option selected value = "DEFAULT">Default</option>
<option value = "SEL1">Selection 1</option>
<option value = "SEL2">Selection 2</option>
</select>
</div>
Ответы 21
Отвечая на свой вопрос по документации. Я уверен, что есть другие способы добиться этого, но это работает, и этот код протестирован.
<html>
<head>
<script language = "Javascript" src = "javascript/jquery-1.2.6.min.js"></script>
<script type = "text/JavaScript">
$(function() {
$(".update").bind("click", // bind the click event to a div
function() {
var selectOption = $('.selDiv').children('.opts') ;
var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index='0']").attr("selected","selected");
// $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
// $(selectOption).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[value='DEFAULT']").attr("selected","selected");
// $(_this).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[index='0']").attr("selected","selected");
}); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class = "update" style = "height:50px; color:blue; cursor:pointer;">Update</div>
<div class = "selDiv">
<select class = "opts">
<option selected value = "DEFAULT">Default</option>
<option value = "SEL1">Selection 1</option>
<option value = "SEL2">Selection 2</option>
</select>
</div>
</body>
</html>
Вы можете просто использовать метод val():
$('select').val('the_value');
Это неправильно, потому что вы УСТАНАВЛИВАЕТЕ значение ВСЕХ элементов SELECT на the_value. .val не является функцией селектора / фильтра! Это средство доступа к свойству, и передача ему этой строки УСТАНАВЛИВАЕТ значение. Я попытался вернуть свой голос, но было слишком поздно после того, как я повторил это в тестировании.
Горячо, получили ли вы 10 голосов за полезный ответ? Val () - это геттер и сеттер. Если вы просто используете val (), вы получите значение. Если вы передадите что-то вроде val ('the_value'), вы установите для него значение 'the_value'
Пожалуйста, @AaronLS и @guilhermeGeek, обратитесь к документы (последний пример). Он работает как селектор для выбора, флажков и переключателей, а также как средство установки значений для ввода текста и текстовых полей.
Вы неправильно прочитали документацию. Для флажков, радио и списков команда устанавливает атрибут «selected» для этих элементов. В последнем примере показано, как передача val («флажок 1») заставляет его стать выбранным. Это не то же самое, что «селектор» с точки зрения получения объектов через селектор CSS / jquery. Я проверил ваш код, в итоге он не работает.
+1: нет, это не селектор JQuery, однако я думаю, что большинство людей, которые ищут этот вопрос, похожи на меня и просто хотят изменить выбранный в данный момент параметр; Придумать настоящий селектор - это просто способ сделать это. И это, безусловно, лучше, чем ответы, которые я видел, когда вы перебираете все варианты.
Я также использовал это ... хотя мне нужно было передать селектор идентификаторов. Но этот ответ очень помог. итак +1 :-)
+1. Использовал этот ответ, поскольку он избавил меня от хлопот с con+ca+to+nation, и поскольку наше значение связано с объектом JavaScript, использование .val(object.property) и object.property = .val() было намного проще. Пока у нас нет ошибок с этим, и, похоже, он работает нормально. Сериализация также работает нормально при использовании этого подхода, и name=value до сих пор сериализуется правильно. (Конечно, $('select') нужно заменить вашим собственным селектором!)
вопрос в том, КАК ВЫБРАТЬ параметр, а не как установить значение <select> :) так что это совершенно неправильный ответ на этот вопрос.
<select> value - это выбранная опция
+1: Правильно, это самый простой способ установить выбранную опцию для выбора. Зачем еще кому-либо использовать селектор jQuery для поиска и элемента option в DOM? Хорошо, предположим, я знаю почему, но случаи, когда необходим выбор элемента option, крайне редки. Большинство других ответов просто изменяют атрибут «selected» параметра после его нахождения, используя селектор jQuery, и это только делает что-то простое очень сложным способом. Так что остальные ответы действительно вводят в заблуждение.
Согласовано с другими, это не выбирает значение. Я предлагаю удалить этот ответ, учитывая кажущийся консенсус по вопросу.
Кажется, выбрать вариант просто отлично, по крайней мере, в Chrome.
@theUtherSide: Я не всегда приходил к консенсусу. Установщик val() на select реализуется путем установки свойства selected дочернего option, где значение совпадает, поэтому он действительно выполняет то, что хотел вопрос (но только для поиска значений, а не текстового поиска).
Селектор для получения среднего элемента-параметра по значению:
$('.selDiv option[value = "SEL1"]')
Для индекса:
$('.selDiv option:eq(1)')
Для известного текста:
$('.selDiv option:contains("Selection 1")')
РЕДАКТИРОВАТЬ: Как отмечалось выше, OP мог быть после изменения выбранного элемента раскрывающегося списка. В версии 1.6 и выше рекомендуется использовать метод prop ():
$('.selDiv option:eq(1)').prop('selected', true)
В старых версиях:
$('.selDiv option:eq(1)').attr('selected', 'selected')
РЕДАКТИРОВАТЬ2: после комментария Райана. Совпадение по «Выборке 10» может быть нежелательным. Я не нашел селектор для соответствия полному тексту, но фильтр работает:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
РЕДАКТИРОВАТЬ3: будьте осторожны с $(e).text(), так как он может содержать новую строку, приводящую к сбою сравнения. Это происходит, когда параметры закрыты неявно (нет тега </option>):
<select ...>
<option value = "1">Selection 1
<option value = "2">Selection 2
:
</select>
Если вы просто используете e.text, любые лишние пробелы, такие как завершающий символ новой строки, будут удалены, что сделает сравнение более надежным.
: contains не очень хорош, так как будет соответствовать фрагментам текста; проблематично, если какой-либо текст вашей опции является подстрокой другого текста опции.
Это тоже работает $ ('# параметр id [значение = "0"]'). attr ('selected', 'selected');
@Grastveit, как изменить цвет первого варианта, если он выбран или нет, когда у него есть класс, скажем, myClass. Спасибо
@ Пользователь, я не понимаю. Может выложить в новом вопросе? Или это $ ('. SelDiv .myClass'). Css ('color', 'red')?
Я хотел бы добавить, что вы должны ОБЯЗАТЕЛЬНО использовать prop, а не attr. Я чуть не сошел с ума, пытаясь отладить приложение, и, переключившись с attr на prop, исправил его.
Ага. .attr () устарел. Вместо этого вы должны использовать .prep (). На самом деле, вы должны были делать это довольно давно.
Надеюсь, вы не против спросить - что означает OP? - 'как прокомментировано выше OP, возможно, был ...'
@FrenkyB: оригинальный плакат, который написал вопрос.
Ни один из вышеперечисленных методов не дал мне нужного решения, поэтому я решил, что предоставлю то, что сработало для меня.
$('#element option[value = "no"]').attr("selected", "selected");
Обратите внимание, что начиная с jQuery 1.6 здесь следует использовать prop, а не attr.
@GoneCoding Использование .attr правильно. "selected" - это атрибут <option> w3.org/TR/html5/forms.html#attr-option-selected
@CarlosLlongo: Это не имеет значения. Рекомендация jQuery - всегда использовать prop вместо attr. Это избавляет от необходимости искать каждое свойство на w3.org, чтобы увидеть, является ли оно всего лишь атрибутом или реализовано с помощью вспомогательных действий.
Вы можете назвать выбор и использовать это:
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
Он должен выбрать нужный вариант.
Для JQuery выбрано, если вы отправляете атрибут в функцию и вам нужно выбрать опцию update-select
$('#yourElement option[value = "'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
По значению то, что у меня сработало с jQuery 1.7, было приведенным ниже кодом, попробуйте это:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
Я не уверен, что вам нужен метод .change ().
.change() был необходим. У меня был пример, когда я переключал миниатюры на основе SELECT. Когда я загружал настраиваемую тему, предполагалось, что из списка параметров нужно выбрать «Пользовательская тема». Вызов .prop() работал, но без .change() эскиз справа от моего выбора никогда не обновлялся.
.change () был лучшим советом. +1
Примечание: логическое значение prop генерирует тот же результат. например .prop('selected', true)
Зависит от некоторых браузеров - возможно, старых браузеров - требуется строка selected. Я думаю, что большинство из них поддерживают текстовую строку.
я пойду с: -
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
Я использую это, когда знаю индекс списка.
$("#yourlist :nth(1)").prop("selected","selected").change();
Это позволяет списку изменяться и запускать событие изменения. ": Nth (n)" отсчитывается с индекса 0
$(elem).find('option[value = "' + value + '"]').attr("selected", "selected");
Спасибо за ваш пост, но что этот ответ добавляет к беседе, что не вошло в принятые ответы?
если есть уже выбранный вариант, тогда это не удастся, так как в раскрывающемся списке не может быть выбрано более одного элемента, если это не множественный выбор. Вам нужно сделать .prop ('selected', true)
$('select').val('the_value'); выглядит правильным решением, и если у вас есть строки таблицы данных, тогда:
$row.find('#component').val('All');
Используя jquery-2.1.4, я нашел следующий ответ, который мне подходит:
$('#MySelectionBox').val(123).change();
Если у вас есть строковое значение, попробуйте следующее:
$('#MySelectionBox').val("extra thing").change();
Другие примеры у меня не сработали, поэтому я добавляю этот ответ.
Я нашел исходный ответ по адресу: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu
если вы не хотите использовать jQuery, вы можете использовать следующий код:
document.getElementById("mySelect").selectedIndex = "2";
/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>
Есть несколько способов сделать это, но самый чистый подход был потерян среди основных ответов и множества аргументов по val(). Также в jQuery 1.6 были изменены некоторые методы, поэтому их нужно обновить.
В следующих примерах я предполагаю, что переменная $select - это объект jQuery, указывающий на желаемый тег <select>, например через следующее:
var $select = $('.selDiv .opts');
Примечание 1 - используйте val () для совпадений значений:
Для сопоставления значений использовать val() намного проще, чем использовать селектор атрибутов: https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
Версия установщика .val() реализована на тегах select путем установки свойства selected соответствующего option с тем же самым value, поэтому отлично работает во всех современных браузерах.
Примечание 2 - используйте prop ('selected', true):
Если вы хотите установить выбранное состояние опции напрямую, вы можете использовать prop (не attr) с параметром boolean (а не текстовым значением selected):
например https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected = "selected" to the tag
Примечание 3 - допускать неизвестные значения:
Если вы используете val() для выбора <option>, но значение val не совпадает (может произойти в зависимости от источника значений), тогда выбирается «ничего», и $select.val() вернет null.
Итак, для показанного примера и для надежности вы можете использовать что-то вроде этого https://jsfiddle.net/1250Ldqn/:
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
Примечание 4 - точное соответствие текста:
Если вы хотите найти соответствие по точному тексту, вы можете использовать filter с функцией. например https://jsfiddle.net/yz7tu49b/2/:
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
хотя, если у вас могут быть лишние пробелы, вы можете добавить обрезку к проверке, как в
return $.trim(this.text) == "some value to match";
Примечание 5 - соответствие по индексу
Если вы хотите сопоставить по индексу, просто проиндексируйте дочерние элементы выбранного, например. https://jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
Хотя в настоящее время я стараюсь избегать прямых свойств DOM в пользу jQuery, в пользу ориентированного на будущее кода, так что это также можно сделать как https://jsfiddle.net/yz7tu49b/5/:
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
Примечание 6 - используйте change (), чтобы активировать новый выбор
Во всех вышеупомянутых случаях событие изменения не срабатывает. Это сделано специально, чтобы вы не заканчивали рекурсивными событиями изменения.
Чтобы сгенерировать событие изменения, если необходимо, просто добавьте вызов .change() к объекту jQuery select. например самый первый простейший пример становится https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
Существует также множество других способов поиска элементов с помощью селекторов атрибутов, таких как [value = "SEL2"], но вы должны помнить, что селекторы атрибутов относительно медленны по сравнению со всеми этими другими вариантами.
очень подробно, спасибо!
Спасибо за вопрос. Надеюсь, этот фрагмент кода сработает для вас.
var val = $("select.opts:visible option:selected ").val();
Для настройки выберите значение с выбранным запуском:
$('select.opts').val('SEL1').change();
Для настройки варианта из области действия:
$('.selDiv option[value = "SEL1"]')
.attr('selected', 'selected')
.change();
Этот код использует селектор, чтобы найти объект выбора с условием, а затем изменить выбранный атрибут с помощью attr().
Кроме того, я рекомендую добавить событие change() после установки атрибута на selected, при этом код будет близок к изменению выбора пользователем.
Попробуй это
вы просто используете идентификатор поля выбора вместо #id (например, # select_name)
вместо стоимость опциона используйте выбранную вами опцию ценить
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>
Точно это сработает, попробуйте следующие методы
For normal select option
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
For select 2 option trigger option need to use
<script>
$(document).ready(function() {
$("#id").val('select value here').trigger('change');
});
</script>
$('#select option[data-id-estado = "3"]').prop("selected",true).trigger("change");
или же
$('#select option[value = "myValue"]').prop("selected",true).trigger("change");
Измените свой ответ, чтобы код был отформатирован как код. Сделайте это с помощью панели инструментов или просто сделав отступ во всех строках каждого блока кода на четыре пробела.
Есть несколько предложений, почему вам следует использовать prop вместо attr.. Определенно используйте prop, поскольку я тестировал оба, и attr даст вам странные результаты, за исключением простейших случаев.
Мне нужно было решение, при котором выбор из произвольно сгруппированных опций select автоматически выбирал другой вход select на той же странице. Так, например, если у вас есть 2 раскрывающихся списка - одно для стран, а другое для континентов. В этом сценарии при выборе любой страны автоматически выбирается континент этой страны в раскрывающемся списке другого континента.
$("#country").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent correctly with prop
$('#continent option[value = "' + originLocationRegion + '"]').prop('selected', true);
});
$("#country2").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent wrongly with attr
$('#continent2 option[value = "' + originLocationRegion + '"]').attr('selected', true);
});<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<form>
<h4 class = "text-success">Props to the good stuff ;) </h4>
<div class = "form-row">
<div class = "form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class = "custom-select country" id = "country">
<option disabled selected>Select Country </option>
<option data-origin-region = "Asia" value = "Afghanistan">Afghanistan</option>
<option data-origin-region = "Antartica" value = "Antartica">Antartica</option>
<option data-origin-region = "Australia" value = "Australia">Australia</option>
<option data-origin-region = "Europe" value = "Austria">Austria</option>
<option data-origin-region = "Asia" value = "Bangladesh">Bangladesh</option>
<option data-origin-region = "South America" value = "Brazil">Brazil</option>
<option data-origin-region = "Africa" value = "Cameroon">Cameroon</option>
<option data-origin-region = "North America" value = "Canada">Canada</option>
<option data-origin-region = "South America" value = "Chile">Chile</option>
<option data-origin-region = "Asia" value = "China">China</option>
<option data-origin-region = "South America" value = "Ecuador">Ecuador</option>
<option data-origin-region = "Australia" value = "Fiji">Fiji</option>
<option data-origin-region = "North America" value = "Mexico">Mexico</option>
<option data-origin-region = "Australia" value = "New Zealand">New Zealand</option>
<option data-origin-region = "Africa" value = "Nigeria">Nigeria</option>
<option data-origin-region = "Europe" value = "Portugal">Portugal</option>
<option data-origin-region = "Africa" value = "Seychelles">Seychelles</option>
<option data-origin-region = "North America" value = "United States">United States</option>
<option data-origin-region = "Europe" value = "United Kingdom">United Kingdom</option>
</select>
</div>
<div class = "form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class = "custom-select" id = "continent">
<option disabled selected>Select Continent</option>
<option disabled value = "Africa">Africa</option>
<option disabled value = "Antartica">Antartica</option>
<option disabled value = "Asia">Asia</option>
<option disabled value = "Europe">Europe</option>
<option disabled value = "North America">North America</option>
<option disabled value = "Australia">Australia</option>
<option disabled value = "South America">South America</option>
</select>
</div>
</div>
</form>
<hr>
<form>
<h4 class = "text-danger"> Attributing the bad stuff to attr </h4>
<div class = "form-row">
<div class = "form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class = "custom-select country-2" id = "country2">
<option disabled selected>Select Country </option>
<option data-origin-region = "Asia" value = "Afghanistan">Afghanistan</option>
<option data-origin-region = "Antartica" value = "Antartica">Antartica</option>
<option data-origin-region = "Australia" value = "Australia">Australia</option>
<option data-origin-region = "Europe" value = "Austria">Austria</option>
<option data-origin-region = "Asia" value = "Bangladesh">Bangladesh</option>
<option data-origin-region = "South America" value = "Brazil">Brazil</option>
<option data-origin-region = "Africa" value = "Cameroon">Cameroon</option>
<option data-origin-region = "North America" value = "Canada">Canada</option>
<option data-origin-region = "South America" value = "Chile">Chile</option>
<option data-origin-region = "Asia" value = "China">China</option>
<option data-origin-region = "South America" value = "Ecuador">Ecuador</option>
<option data-origin-region = "Australia" value = "Fiji">Fiji</option>
<option data-origin-region = "North America" value = "Mexico">Mexico</option>
<option data-origin-region = "Australia" value = "New Zealand">New Zealand</option>
<option data-origin-region = "Africa" value = "Nigeria">Nigeria</option>
<option data-origin-region = "Europe" value = "Portugal">Portugal</option>
<option data-origin-region = "Africa" value = "Seychelles">Seychelles</option>
<option data-origin-region = "North America" value = "United States">United States</option>
<option data-origin-region = "Europe" value = "United Kingdom">United Kingdom</option>
</select>
</div>
<div class = "form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class = "custom-select" id = "continent2">
<option disabled selected>Select Continent</option>
<option disabled value = "Africa">Africa</option>
<option disabled value = "Antartica">Antartica</option>
<option disabled value = "Asia">Asia</option>
<option disabled value = "Europe">Europe</option>
<option disabled value = "North America">North America</option>
<option disabled value = "Australia">Australia</option>
<option disabled value = "South America">South America</option>
</select>
</div>
</div>
</form>
</div>Как видно из фрагмента кода, prop работает правильно каждый раз, но attr не может правильно выбрать после того, как опция была выбрана один раз.
Ключевой момент: Обычно нас интересует свойство атрибута, поэтому в большинстве ситуаций безопаснее использовать prop вместо attr.
$("#my_select").val("the_new_value").change();... ... от так