Как выбрать конкретный параметр в элементе SELECT в jQuery?
Если вы знаете индекс, значение или текст. также, если у вас нет ID для прямой ссылки.
этой, этой и этой все полезные ответы.
пример разметки
<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>
19 ответов
селектор, чтобы получить средний вариант-элемент, значение
$('.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')
EDIT2: после комментария Райана. Матч на "Выбор 10" может быть нежелательным. Я не нашел селектор чтобы соответствовать полному тексту, но фильтр работает:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3: будьте осторожны с $(e).text()
поскольку он может содержать новую строку, что делает сравнение неудачным. Это происходит, когда параметры неявно закрыты (no </option>
tag):
<select ...>
<option value="1">Selection 1
<option value="2'>Selection 2
:
если вы просто использовать e.text
любые дополнительные пробелы, такие как конечная новая строка, будут удалены, что сделает сравнение более крепкий.
ни один из вышеперечисленных методов не нужны, поэтому я решил предоставить то, что работал для меня.
$('#element option[value="no"]').attr("selected", "selected");
по значению, что сработало для меня с jQuery 1.7 был ниже кода, попробуйте следующее:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
вы можете назвать select и использовать это:
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
Он должен выбрать нужный вариант.
есть несколько способов сделать это, но самый чистый подход был потерян среди лучших ответов и множество аргументов за 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
) С
отвечая на мой собственный вопрос для документации. Я уверен, что есть другие способы сделать это, но это работает, и этот код тестируется.
<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>
используя 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
Я использую это, когда я знаю, что индекс списка.
$("#yourlist :nth(1)").prop("selected","selected").change();
это позволяет изменить список и запустить событие change. ": Nth(n) " отсчитывается от индекса 0
Я пойду с:-
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
для установки выберите значение с выбранным запуском:
$('select.opts').val('SEL1').change();
для настройки опции из области:
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
этот код использует селектор, чтобы узнать объект select с условием, а затем изменить выбранный атрибут на attr()
.
Futher, я рекомендую добавить change()
событие после установки атрибута selected
, сделав это, код будет близок к изменению выбора пользователем.
для выбранного Jquery, если вы отправляете атрибут в функцию и вам нужно обновить-выберите опцию
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>
попробуй такое
вы просто используете select field id вместо #id (т. е.#select_name)
вместо Параметр Значение используйте опцию select стоимостью
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>
на $('select').val('the_value');
выглядит правильным решением и если у вас есть таблица данных строк тут:
$row.find('#component').val('All');
Если вы не хотите использовать jQuery, вы можете использовать ниже код:
document.getElementById("mySelect").selectedIndex = "2";
Спасибо за вопрос. Надеюсь, этот код сработает.
var val = $("select.opts:visible option:selected ").val();
попробуйте этот новый
именно это будет работать
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>