web-dev-qa-db-fra.com

L'option de sélection n'est pas mise à jour de la propriété «sélectionnée» dans la page Web HTML

Veuillez expliquer comment puis-je modifier la propriété d'option "sélectionnée"? Par exemple.:

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

Donc, si je change la valeur de la liste déroulante, rien n'est changé dans html-data. Pourquoi?

Ce n'est que si j'essaie de forcer le rechargement de la propriété à l'aide de jQuery que cela fonctionne.

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

Pourquoi? Comment puis-je éviter ça? Est-il possible de changer "sélectionné" en utilisant du HTML pur?

EDIT Je veux notamment cette attrbute dans la balise html car j'ai besoin de sauvegarder et de restaurer la partie de ce code html à l'avenir.

javascriptjqueryhtmlhtml-select
17
Vyacheslav

Mis à jour, substitué .attr("selected", true) à .prop("selected", true)

Remarque: la valeur de l'attribut selected renvoie true ou false, pas "selected".

Essayez d'utiliser le sélecteur $("option[value=" + this.value + "]", this), définissez la propriété selected sur true, .siblings() pour supprimer l'attribut selected de option non séléctionné

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

Cela ne change pas le html lui-même mais il change la valeur du 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>
3
Mosh Feu

Utilisez la méthode val(). Donc dans votre cas, $("#lang_select").val('en'); sélectionne l'option anglaise. Et au fait, si vous voulez que la première option soit sélectionnée, vous n'avez pas besoin du selected="selected". Par défaut, la première option est automatiquement sélectionnée.

1
André Silva