Установите опцию выбора «selected», по значению
У меня есть поле select
с некоторыми опциями. Теперь мне нужно выбрать один из этих options
с помощью jQuery. Но как я могу это сделать, когда знаю только value
option
которое нужно выбрать?
У меня есть следующий HTML:
Val 1 Val 2 Val 3
Мне нужно выбрать опцию со значением val2
. Как это может быть сделано?
- Эффективный, лаконичный способ найти следующий соответствующий друг?
- jQuery .bind () vs. .on ()
- jQuery выбрать все, кроме первого
- Выбрать элемент по точному соответствию его содержимому
- : nth-of-type () в jQuery / Sizzle?
Вот демонстрационная страница: http://jsfiddle.net/9Stxb/
- Селекторы jQuery с переменными
- jQuery выбирает атрибут с использованием операторов AND и OR
- Доступ к css ": после" селектор с jQuery
- Случай селектора CSS для атрибутов
- Должны ли все события jquery быть привязаны к $ (документу)?
- Как работают PrimeFaces Selectors как в update = "@ (. MyClass)"?
- использовать jQuery's find () для объекта JSON
- Как я могу получить соответствующий заголовок таблицы (th) из ячейки таблицы (td)?
Есть более простой способ, который не требует, чтобы вы вошли в тег параметров:
$("div.id_100 select").val("val2");
Проверьте этот метод jQuery .
Чтобы выбрать параметр со значением «val2»:
$('.id_100 option[value=val2]').attr('selected','selected');
Используйте событие change()
после выбора значения. Из документов:
Если поле теряет фокус без изменения содержимого, событие не запускается. Чтобы инициировать событие вручную, примените
.change()
без аргументов:
$("#select_id").val("val2").change();
Дополнительная информация находится на .change () .
Сначала отмените выбор и отфильтруйте выбранные параметры:
$('.id_100 option') .removeAttr('selected') .filter('[value=val1]') .attr('selected', true)
Настройка на ожидающий статус по значению
$('#contribution_status_id').val("2");
Для меня следующая работа
$("div.id_100").val("val2").change();
Я думаю, что самый простой способ – выбрать значение val (), но вы можете проверить следующее. См. Как обрабатывать тег select и option в jQuery? для получения дополнительной информации о параметрах.
$('div.id_100 option[value="val2"]').prop("selected", true); $('id_100').val('val2');
Не оптимизирован, но в некоторых случаях также полезна следующая логика.
$('.id_100 option').each(function() { if($(this).val() == 'val2') { $(this).prop("selected", true); } });
Вы можете выбрать любой атрибут и его значение с помощью селектора атрибутов [attributename=optionalvalue]
, поэтому в вашем случае вы можете выбрать параметр и установить выбранный атрибут.
$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);
Где value
– это значение, которое вы хотите выбрать.
Если вам нужно удалить какие-либо ранее выбранные значения, как это было бы в случае, если это используется несколько раз, вам нужно немного изменить его, чтобы сначала удалить выбранный атрибут
$("div.id_100 option:selected").prop("selected",false); $("div.id_100 option[value=" + value + "]") .prop("selected",true);
Самый простой способ сделать это:
HTML
JQuery
$('select[name="dept"]').val('3');
Выход: активирует ENT .
простой ответ: html
на jquery, вызовите функцию нажатием кнопки или
$('#idUkuran').val(11).change();
это простой и 100% работает, потому что его взяли из моей работы … 🙂 надеюсь, что это поможет ..
Лучше использовать change()
после установки значения выбора.
$("div.id_100 select").val("val2").change();
Делая это, код будет близок к изменению выбора пользователем, объяснение включено в JS Fiddle :
JS Fiddle
Использование:
$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);
Это работает для меня. Я использую этот код для parsingа значения в форме обновления fancybox, и мой полный источник из app.js:
jQuery(".fancybox-btn-upd").click(function(){ var ebid = jQuery(this).val(); jQuery.ajax({ type: "POST", url: js_base_url+"manajemen_cms/get_ebook_data", data: {ebookid:ebid}, success: function(transport){ var re = jQuery.parseJSON(transport); jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true); document.getElementById("upd-nama").setAttribute('value',re['judul']); document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']); document.getElementById("upd-tahun").setAttribute('value',re['terbit']); document.getElementById("upd-halaman").setAttribute('value',re['halaman']); document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']); var content = jQuery("#fancybox-form-upd").html(); jQuery.fancybox({ type: 'ajax', prevEffect: 'none', nextEffect: 'none', closeBtn: true, content: content, helpers: { title: { type: 'inside' } } }); } }); });
И мой PHP-код:
function get_ebook_data() { $ebkid = $this->input->post('ebookid'); $rs = $this->mod_manajemen->get_ebook_detail($ebkid); $hasil['id'] = $ebkid; foreach ($rs as $row) { $hasil['judul'] = $row->ebook_judul; $hasil['kategori'] = $row->ebook_cat_id; $hasil['penerbit'] = $row->ebook_penerbit; $hasil['terbit'] = $row->ebook_terbit; $hasil['halaman'] = $row->ebook_halaman; $hasil['bahasa'] = $row->ebook_bahasa; $hasil['format'] = $row->ebook_format; } $this->output->set_output(json_encode($hasil)); }
var opt = new Option(name, id); $("#selectboxName").append(opt); opt.setAttribute("selected","selected");
.attr () иногда не работает в старых версиях jQuery, но вы можете использовать .prop () :
$('select#ddlCountry option').each(function () { if ($(this).text().toLowerCase() == co.toLowerCase()) { $(this).prop('selected','selected'); return; } });
$('#graphtype option[value=""]').prop("selected", true);
Это хорошо работает, где #graphtype
является идентификатором тега select.
пример select tag:
Это верно для Select Control :
$('select#ddlCountry option').each(function () { if ($(this).text().toLowerCase() == co.toLowerCase()) { this.selected = true; return; } });
Хорошо, я понимаю, что этот пост древний, но некоторые ответы на это хуже, чем плохие. Страшно даже. И я сопротивляюсь стремлению не отвечать на это в пирате, говоря о презрении к некоторым другим плакатам в этой теме.
Нет причин переубеждать это с бесконечными находками и выборами. Это очень просто. Все, что вы делаете, – это доступ и настройка свойства. Вот и все.
Хорошо, так что некоторые основные дома: Если вы делали это в прямом Javascript, вы бы это сделали:
window.document.getElementById('my_stuff').selectedIndex = 4
Но вы не делаете этого с помощью Javascript, вы делаете это с JQuery. И в Jquery, бог благословляйте это, вы хотите использовать функцию .prop () для установки свойства. Думаю, это имеет смысл. Итак, вы сделали бы это так.
$("#my_stuff").prop('selectedIndex', 4);
Видеть? Неужели это так сложно?
В любом случае, просто убедитесь, что ваш идентификатор уникален. В противном случае вы будете стучать головой о стену, задаваясь вопросом, почему это не сработало.
Попробуй это. Простой, но эффективный javaScript + jQuery смертельный комбо.
SelectComponent:
Выбор:
document.getElementById("YourSelectComponentID").value = 4;
Теперь будет выбран ваш вариант 4. Вы можете сделать это, чтобы выбрать значения по умолчанию по умолчанию.
$(function(){ document.getElementById("YourSelectComponentID").value = 4; });
или создать простую функцию, поместите в нее строку и вызовите функцию на anyEvent, чтобы выбрать параметр
Смесь jQuery + javaScript делает магию ….
Просто введите этот код:
$("#Controls_ID").val(value);
- Вы должны помнить, что значение, которое вы хотите изменить динамически, должно быть таким же, как и в параметрах, которые вы определяете в своем HTML, так как это
case sensative
. Вы можете изменить окно выбора динамически следующим образом:
$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work
Это старая почта, но вот одна простая функция, которая действует как плагин jQuery.
$.fn.selectOption = function(val){ this.val(val) .find('option') .removeAttr('selected') .parent() .find('option[value="'+ val +'"]') .attr('selected', 'selected') .parent() .trigger('change'); return this; };
Вы просто можете сделать что-то вроде этого:
$('.id_100').selectOption('val2');
Reson, потому что вы используете это, потому что вы меняете выбранный satemant на DOM, что поддерживает crossbrowser, а также вызывает изменение, вы можете его поймать.
Это базовое моделирование человеческих действий.