HTML网页中的选择选项未更新为“已选择”属性

Question

Please, explain how can I change 'selected' property of option? Eg:

<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>

So, if I change the drop down list value nothing is changed in html-data. Why?

Only if I try to force reload the property using jQuery it works.

$(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');
        }
    });
});

Why? How can I avoid this? Is it possible to change "selected" using pure html?

EDIT I namely want this attrbute in html tag because I need to save and restore the part of this html-code in future.

Answer 1

Updated, substituted .attr("selected", true) for .prop("selected", true)

Note , value of selected attribute returns true or false , not "selected" .

Try utilizing selector $("option[value=" + this.value + "]", this) , set property selected to true , .siblings() to remove selected attribute from option not selected

 $(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> 

Answer 2

It's not change the html itself but it does change the value of the 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> 

Answer 3

Use the val() method. So in your case, $("#lang_select").val('en'); selects the english option. And by the way if you want the first option to be selected you don't need the selected="selected" . By default the first option is automatically selected.