Опция выбора не обновляется 'selected' свойство в HTML-странице

Пожалуйста, объясните, как я могу изменить свойство "selected" для опции? Например:.

<select id="lang_select">
    <option value="en" selected="selected">english</option>
    <option value="ar">العربية</option>
    <option value="az">azərbaycanlı</option>
    <option value="bg">български</option>
    <option value="ca">català</option>
    <option value="cs">český</option>
    <!-- some data cut -->
</select>

Итак, если я изменяю значение выпадающего списка, в html-данных ничего не изменяется. Почему?

Только если я попытаюсь принудительно перезагрузить свойство, используя jQuery, он будет работать.

$(document).on('change',"select",function(){
    var i = $(this)[0].selectedIndex;
    var ch = $(this).children().each(function(index){
        $(this).prop('selected',index == i);
        if (index == i) {
            $(this).attr('selected','selected');
        } else {
            $(this).removeAttr('selected');
        }
    });
});

Почему? Как я могу избежать этого? Можно ли изменить "выбранный" с помощью чистого html?

ИЗМЕНИТЬ Я хочу, чтобы это attrbute в теге html, потому что мне нужно сохранить и восстановить часть этого html-кода в будущем.

Ответ 1

Обновлено, заменено .attr("selected", true) для .prop("selected", true)

Примечание. Значение атрибута selected возвращает true или false, а не "selected".

Попробуйте использовать селектор $("option[value=" + this.value + "]", this), установите свойство selected на true, .siblings(), чтобы удалить атрибут selected из option не выбран

$(document).on("change","select",function(){
  $("option[value=" + this.value + "]", this)
  .attr("selected", true).siblings()
  .removeAttr("selected")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_select">
<option value="en"  selected="true">english</option>
<option value="ar">العربية</option>
<option value="az">azərbaycanlı</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="cs">český</option>
<!-- some data cut -->

</select>

Ответ 2

Он не меняет самого html, но меняет значение select

$('select').change(function(){
    $('#result').html($(this).val());
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="lang_select">
  <option value="en" selected="selected">english</option>
  <option value="ar">العربية</option>
  <option value="az">azərbaycanlı</option>
  <option value="bg">български</option>
  <option value="ca">català</option>
  <option value="cs">český</option>
  <!-- some data cut -->
</select>
<hr />
<div id="result"></div>

Ответ 3

Используйте метод val(). Поэтому в вашем случае $("#lang_select").val('en'); выбирает английский вариант. И, кстати, если вы хотите, чтобы первый вариант был выбран, вам не нужен selected="selected". По умолчанию автоматически выбирается первый вариант.