Выбранное свойство не было установлено в моем объекте select

Question

Я хочу изменить значение моего раскрывающегося списка с помощью jQuery. Я использую следующий код:

<select id="id145" name="id145" class="dropdown" > 
    <option selected="selected" value="0">1 - test</option> 
    <option value="1">2 - test</option> 
</select> 

со следующим JS:

$('[name=id145] option').filter(function() { 
    return ($(this).val() == '1'); 
}).prop('selected', true); 

Я вижу, что в моем раскрывающемся списке значение 1 - выбрано (2 тестов), но всякий раз, когда я смотрю на исходном коде, с помощью инструментов инспектор, я все еще вижу это:

<option selected="selected" value="0">1 - test</option> 
<option value="1">2 - test</option> 

То, что я ожидал увидеть, и не бывает, это:

<option value="0">1 - test</option> 
<option selected="selected" value="1">2 - test</option> 

Кто-нибудь знает почему? и возможно ли это?

DEMO HERE

Answer 1

Вы сказали, что даже с помощью инспектора DOM (например, правой кнопкой мыши выберите и выберите «Проверить элемент»), вы все еще видим selected="selected" на первый вариант, а не второй. (И я могу подтвердить, что, я тоже.)

Атрибут selected устанавливает состояние по умолчанию в option; он не обязательно отражает его текущее состояние. От the specification:

Атрибут selected является логическим атрибутом. Он представляет значение по умолчанию.

(курсив мой)

элемента selectedсвойство говорит вам свое текущее состояние, а не атрибут. Это похоже на атрибут value на input элементах (который также устанавливает значение по умолчанию, а не текущее значение). Если поле select было в form, и вы получили имя reset в форме, первый вариант будет выбран снова, потому что это значение по умолчанию для поля выбора.

Если вы хотите узнать, есть ли опция , то в настоящее время выбрана, эта информация недоступна на уровне атрибута. Вы должны осмотреть имущество, вместо:

$('[name=id145]').val('1'); 
 
$("[name=id145] option").each(function() { 
 
    console.log("Option " + this.value + ": Selected? " + this.selected); // or $(this).prop("selected") 
 
});

<select id="id145" name="id145" class="dropdown" > 
 
    <option selected="selected" value="0">1 - test</option> 
 
    <option value="1">2 - test</option> 
 
</select> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>