Параметр Select не обновляется свойство "selected" на веб-странице HTML

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

<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-кода в будущем.

11
html html-select javascript jquery

3 ответов

обновить, заменить .attr("selected", true) на .prop("selected", true)

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

попробуйте использовать селектор $("option[value=" + this.value + "]", this) , расположен selected до true , .siblings() удалить С 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>
12

это не меняет 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>
2

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

0