äußereHTML- und Attributaktualisierungen

Question

Ich versuche, den HTML-Code als String mit den Attributaktualisierungen abzurufen.

Ich habe eine select Tag, dessen Optionen ich mit JavaScript aktualisiere.

Standardmäßig eine Premiere option Ist selected unter Verwendung des HTML-Attributs selected="selected".

Wenn ich es deaktiviere selected von der ersten Option mit option1.selected = false und eingestellt option2.selected = true zum zweiten option, und rufen Sie dann an outerHTML von einem select, Ich bekomme

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

Wie du sehen kannst, selected Das Attribut befindet sich immer noch auf dem ersten option, während es in die zweite verschoben wurde option.Das erwartete Ergebnis ist

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

Hier ist ein Beispiel http://jsbin.com/adAbAMe/2/edit?html,js,console,output (klicken run with js um ein Ergebnis zu erhalten), das zeigt, dass wenn a selected Attribut geändert wurde, ändert es sich nicht im HTML-Code.

Aber ich muss den endgültigen HTML-Code von OuterHTML mit den erfolgreichen Attributaktualisierungen erhalten, denn wenn ich das verschiebe select Irgendwo erhalte ich keine Updates mehr, die ich vor der Verwendung von JavaScript vorgenommen habe.

Gibt es eine Methode, um den HTML-Code als Zeichenfolge mit den tatsächlichen Attributwerten abzurufen?

Answer 1

Der selected Das Attribut wird nicht automatisch aktualisiert, aber Sie können festlegen, dass es entfernt und den richtigen Elementen hinzugefügt wird.

//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");
}

Hier ist eine funktionierende Geige.

Answer 2

Sie können verwenden

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

Und

option.removeAttribute('selected');

Answer 3

Versuchen

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

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

Demo: Geige

Answer 4

Von dem DOM-Spezifikation:

ausgewählt vom Typ Boolescher Wert

Stellt den aktuellen Status des entsprechenden Formularsteuerelements in einem interaktiven Benutzeragenten dar.Das Ändern dieses Attributs ändert den Status des Formularsteuerelements. ändert jedoch nicht den Wert des HTML-ausgewählten Attributs des Elements.

(Hervorhebung von mir)

Um den gewünschten Effekt zu erzielen option.setAttribute('selected', 'selected'), obwohl Sie auch brauchen werden option.removeAtrribute('selected') zu den anderen Optionen.