it-swarm.com.ru

Установка выбранного атрибута в списке выбора с помощью jQuery

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

<select id="dropdown">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

У меня есть строка "B", поэтому я хочу установить для нее атрибут selected, чтобы она была такой:

<select id="dropdown">
    <option>A</option>
    <option selected="selected">B</option>
    <option>C</option>
</select>

Как бы я сделал это в JQuery?

49
Rupert

Если вы не возражаете немного изменить HTML-код, включив в него атрибут value, вы можете значительно сократить код, необходимый для этого:

<option>B</option>

в

<option value="B">B</option>

Это будет полезно, если вы хотите сделать что-то вроде:

<option value="IL">Illinois</option>

При этом, следующий jQuery внесет изменения:

$("select option[value='B']").attr("selected","selected");

Если вы решите не включить использование атрибута value, вам потребуется циклически просмотреть каждую опцию и вручную проверить ее значение:

$("select option").each(function(){
  if ($(this).text() == "B")
    $(this).attr("selected","selected");
});
119
Sampson
<select id="cars">
<option value='volvo'>volvo</option>
<option value='bmw'>bmw</option>
<option value='fiat'>fiat</option>
</select>

var make = "fiat";

$("#cars option[value='" + make + "']").attr("selected","selected");
11
Darren Rose

Если вы используете JQuery, начиная с версии 1.6, вы должны использовать метод .prop ():

$('select option:nth(1)').prop("selected","selected");
5
G.Busato

Я бы перебирал варианты, сравнивая текст с тем, что я хочу выбрать, а затем устанавливал выбранный атрибут для этой опции. Как только вы найдете правильный, прекратите итерацию (если у вас нет мультиселекции).

 $('#dropdown').find('option').each( function() {
      var $this = $(this);
      if ($this.text() == 'B') {
         $this.attr('selected','selected');
         return false;
      }
 });
3
tvanfosson

Вы можете следовать стратегии .selectedIndex в danielrmt, но определить индекс на основе текста в тегах параметров следующим образом:

$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B');

Это работает с оригинальным HTML без использования атрибутов значения.

2
Derek Veit

Вы можете использовать чистый DOM. Смотрите http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

document.getElementById('dropdown').selectedIndex = 1;

но jQuery может помочь:

$('#dropdown').selectedIndex = 1;
1
danielrmt
$('#select_id option:eq(0)').prop('selected', 'selected');

хорошо

1
Mikulasche

Это может быть решением

$(document).on('change', 'select', function () {
            var value = $(this).val();
            $(this).find('option[value="' + value + '"]').attr("selected", "selected");
        })
1
Regan

Код:

var select = function(dropdown, selectedValue) {
    var options = $(dropdown).find("option");
    var matches = $.grep(options,
        function(n) { return $(n).text() == selectedValue; });
    $(matches).attr("selected", "selected");
};

Пример:

select("#dropdown", "B");
1
Joe Chung

Что-то вроде ...

$('select option:nth(1)').attr("selected","selected"); 
0
David