Я пытаюсь написать простой сценарий jquery, который будет циклически проходить по всем <select> элементам на странице, подбирать атрибут с именем selected и устанавливать значение параметра selected на основании этого.

Пример:

<select selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

В приведенном выше примере код установит параметр «два» для выбранного.

Какой самый чистый способ написать это?

изменить:

Для пояснения основная проблема с моим вопросом и приведенным выше примером заключается в том, что я использовал зарезервированное ключевое слово «selected». Я бы предложил использовать другое имя атрибута (я изменил свое на data-selected, это даже верно для html5-spec :-)).

<select data-selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
0
mikkom 17 Дек 2015 в 14:22

4 ответа

Лучший ответ

selected является зарезервированным свойством. Независимо от того, что вы установили, jQuery вернет значение «выбрано».

Вместо этого вы можете получить доступ к DOM attributes Сбор напрямую, вот так:

$('select[selected]').val(function() {
  return this.attributes.selected.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select selected="1">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select selected="3">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
2
Rick Hitchcock 17 Дек 2015 в 11:46

Как упоминалось в других ответах, selected является зарезервированным ключевым словом.

Настроил ваш HTML, и теперь он работает:

<select mysv="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

$("select").each(function(){
    var sv = $(this).attr("mysv");
  $(this).find("option[value="+sv+"]").attr("selected", "selected");
});
0
Yahya 17 Дек 2015 в 11:47

options имеют атрибуты selected. Вы не можете иметь атрибут selected в таком элементе select. Вы можете иметь атрибут данных или имя.

$('select[data-selected="1"]')

Или

$('select[name="1"]')

Чтобы получить параметр со значением 1, вы можете просто сделать и добавить к нему выбранный атрибут:

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

ДЕМО

1
Andy 17 Дек 2015 в 11:44

Это код, которым я наконец закончил. У него есть еще одна вещь, которой не было у других решений - проверка доступности атрибутов. Другие решения установят поле выбора пустым (даже если нет доступных параметров), если атрибут отсутствует.

$("select").each(function() {
   var selected_val = $(this).attr("data-selected");
   if(selected_val)
      $(this).val(selected_val);
});
0
mikkom 17 Дек 2015 в 12:25