externalHTML et mises à jour des attributs

Question

J'essaie d'obtenir le code HTML sous forme de chaîne avec les mises à jour d'attributs.

j'ai un select tag, dont je mets à jour les options à l’aide de JavaScript.

Par défaut, un premier option est selected en utilisant l'attribut HTML selected="selected".

Si je désactive selected à partir de la première option en utilisant option1.selected = false Et mettre option2.selected = true pour la seconde option, puis appelez le outerHTML d'un select, Je reçois

<select>
    <option selected="selected">one</option>
    <option>two</option>
    <option>three</option>
  </select>

Comme vous pouvez le voir, selected l'attribut est toujours sur le premier option, alors qu'il a été déplacé vers le deuxième option.Le résultat attendu est

<select>
    <option>one</option>
    <option selected="selected">two</option>
    <option>three</option>
  </select>

Voici un exemple http://jsbin.com/adAbAMe/2/edit?html,js,console,output (Cliquez sur run with js pour obtenir un résultat) qui montre que si un selected L'attribut a été modifié, il ne change pas dans le code HTML.

Mais j'ai besoin d'obtenir le code HTML final d'outerHTML avec les mises à jour d'attributs réussies, car si je déplace ceci select quelque part, je ne recevrai aucune mise à jour que j'ai effectuée avant d'utiliser JavaScript.

Existe-t-il une méthode pour obtenir le code HTML sous forme de chaîne avec les valeurs réelles des attributs ?

Answer 1

Le selected L'attribut n'est pas automatiquement mis à jour, mais vous pouvez le configurer pour qu'il soit supprimé et ajouté aux éléments appropriés.

//remove "selected" from first
if (i==0) {
  option.selected = false;
  option.removeAttribute("selected");
}

//add "selected" to second
if (i==1) {
  option.selected = true;
  option.setAttribute("selected", "selected");
}

Voici un violon qui fonctionne.

Answer 2

Vous pouvez utiliser

option.setAttribute('selected', 'selected');

et

option.removeAttribute('selected');

Answer 3

Essayer

$('button').click(function () {
    console.log($('select').prop('outerHTML'))
})

$('select').change(function(){
    $(this).find('option[selected]').removeAttr('selected');
    $(this).find('option:selected').attr('selected', 'selected');
})

Démo : Violon

Answer 4

Du Spécification DOM:

choisi de type booléen

Représente l’état actuel du contrôle de formulaire correspondant, dans un agent utilisateur interactif.La modification de cet attribut modifie l'état du contrôle de formulaire, mais ne modifie pas la valeur de l'attribut HTML sélectionné de l'élément.

(c'est moi qui souligne)

Pour obtenir l'effet que vous recherchez, vous voulez option.setAttribute('selected', 'selected'), même si vous aurez également besoin option.removeAtrribute('selected') sur les autres options.