L'opzione Seleziona non è aggiornata proprietà 'selezionata' nella pagina Web HTML

Question

Per favore, spiegate come posso modificare la proprietà 'selezionata' dell'opzione? Es .:

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

Quindi, se cambio la discesa valore della lista nulla è cambiato in html-dati. Perché?

Solo se provo a forzare la ricarica della proprietà utilizzando jQuery funziona.

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

Perché? Come posso evitare questo? È possibile cambiare "selezionato" usando puro html?

EDIT io voglio questo e cioè attrbute nel tag html perché ho bisogno di salvare e ripristinare la parte di questo codice HTML in futuro.

Answer 1

aggiornamento, sostituito .attr("selected", true) per .prop("selected", true)

nota, il valore dell'attributo selected ritorna true oppure false, non "selected".

Prova utilizzando selettore $("option[value=" + this.value + "]", this), impostare la proprietà selected a true, .siblings() per rimuovere l'attributo selected da option non selezionato

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

Utilizzare il metodo val(). Quindi nel tuo caso, $("#lang_select").val('en'); seleziona l'opzione inglese. E comunque se vuoi che la prima opzione sia selezionata non hai bisogno dello selected="selected". Di default la prima opzione viene selezionata automaticamente.

Answer 3

Non cambiamo il html sé, ma doe di modificare il valore del 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>