Установите опцию выбора «selected», по значению

У меня есть поле select с некоторыми опциями. Теперь мне нужно выбрать один из этих options с помощью jQuery. Но как я могу это сделать, когда знаю только value option которое нужно выбрать?

У меня есть следующий HTML:

 
Val 1 Val 2 Val 3

Мне нужно выбрать опцию со значением val2 . Как это может быть сделано?

Вот демонстрационная страница: http://jsfiddle.net/9Stxb/

Есть более простой способ, который не требует, чтобы вы вошли в тег параметров:

 $("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, а также вызывает изменение, вы можете его поймать.

Это базовое моделирование человеческих действий.

  • jQuery: исключить $ (this) из селектора
  • addID в jQuery?
  • Как определить, работает ли браузер Chrome с помощью jQuery?
  • Как выбрать элементы, которые не имеют определенного дочернего элемента с JQuery
  • jQuery mobile - для каждого события прямого трансляционного события должно существовать эквивалентное событие click?
  • jQuery hasClass () - проверьте несколько classов
  • Как получить выражение селектора jQuery в виде текста?
  • jQuery выбрать по classу VS выбрать по атрибуту
  • Как изменить css display none или заблокировать свойство с помощью JQuery?
  • jQuery получить все div, которые не имеют атрибута classа
  • Более чистый способ выбора нескольких возможных значений атрибутов?
  • Давайте будем гением компьютера.