Opcja zaznaczenia nie jest aktualizowana "wybrana" właściwość na stronie HTML

Question

Proszę wyjaśnić, w jaki sposób mogę zmienić "wybraną" właściwość opcji? Np .:

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

Więc jeśli zmienić wartość rozwijanych list nic się nie zmieniło w HTML-danych. Dlaczego?

Tylko jeśli spróbuję ponownie załadować właściwość za pomocą jQuery, działa.

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

Dlaczego? Jak mogę tego uniknąć? Czy można zmienić "wybrane" używając czystego html?

EDIT ja mianowicie chce to attrbute w znaczniku html, bo trzeba oszczędzać i przywrócić część tego HTML-kodu w przyszłości.

Answer 1

zaktualizowany, podstawiony .attr("selected", true) dla .prop("selected", true)

Uwaga, wartość atrybutu selected zwraca true lub false, a nie "selected".

Spróbuj wykorzystując selektor $("option[value=" + this.value + "]", this) ustaw właściwość selected do true, .siblings() usunąć atrybut selected z option nie wybrano

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

Użyj metody val(). Tak więc w twoim przypadku, $("#lang_select").val('en'); wybiera opcję angielską. A tak przy okazji, jeśli chcesz wybrać pierwszą opcję, nie potrzebujesz selected="selected". Domyślnie pierwsza opcja jest automatycznie wybierana.

Answer 3

To nie zmieni html się jednak Doe zmienić wartość 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>