Select option is not updated 'selected' property in HTML web page
Solution 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>
Solution 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>
Solution 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.
Vyacheslav
Updated on May 23, 2020Comments
-
Vyacheslav almost 4 years
Please, explain how can I change 'selected' property of option? E.g.:
<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.
-
Vyacheslav over 8 yearsI wrote I namely need this attribute in html.
-
Vyacheslav over 8 yearsThis code do not add 'selected' tag attribute. But it is possible to modify this code to give a correct result. How can I correctly add 'selected' attribut e in one line? $(this).attr('selected','selected'); -- this code.
-
Vyacheslav over 8 yearsI've updated my question. I need 'selected' attribute in order to save-and-restore this part of html code.
-
Mosh Feu over 8 yearsWhere do you save the html? Whay you didn't save the value, and set it later?
-
Vyacheslav over 8 yearsOn the server. I send some html-code of currect page in order to save current work of user. So, when the user downloads his work later, the 'selected option' have to be selected.
-
Mosh Feu over 8 yearsI think that it's wired way (logic and security) but it's my opinion. Anyway, you can change the attribute just before you send it to the server, I don't need to do it in
change
event.