outerHTML e aggiornamenti degli attributi

Question

Sto cercando di ottenere il codice HTML come stringa con gli aggiornamenti degli attributi.

Ho un select tag, le cui opzioni aggiorno usando JavaScript.

Per impostazione predefinita, un primo option essere selected utilizzo dell'attributo HTML selected="selected".

Se ho deselezionare selected dalla prima opzione usando option1.selected = false e impostare option2.selected = true per il secondo option, e poi chiama il outerHTML di un select, Capisco

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

Come puoi vedere, selected attributo è ancora sul primo option, mentre è stato spostato al secondo option.Il risultato atteso è

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

Ecco un esempio http://jsbin.com/adAbAMe/2/edit?html,js, console, uscita (clic run with js per ottenere un risultato) che mostra, che se un selected l'attributo è stato modificato, non cambia nel codice HTML.

Ma ho bisogno di ottenere l'HTML finale da outerHTML con gli aggiornamenti degli attributi di successo, perché se sposto questo select da qualche parte non riceverò alcun aggiornamento che ho fatto prima di usare JavaScript.

Esiste un metodo per ottenere l'HTML come stringa con i valori degli attributi reali?

Answer 1

L'attributo selected non viene aggiornato automaticamente, ma è possibile impostarlo da rimuovere e aggiunto agli elementi corretti.

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

.

Ecco un violino funzionante .

Answer 2

Puoi usare

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

.

e

option.removeAttribute('selected');

.

Answer 3

Prova

$('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: Fiddle

Answer 4

Dal Specifica DOM:

selezionato di tipo booleano

Rappresenta lo stato corrente del controllo modulo corrispondente, in un agente utente interattivo.La modifica di questo attributo modifica lo stato del controllo modulo, ma non cambia il valore dell'attributo HTML selezionato dell'elemento.

(enfasi mia)

Per ottenere l'effetto che stai cercando, vuoi option.setAttribute('selected', 'selected'), sebbene anche Lei avrà bisogno di option.removeAtrribute('selected') sulle altre opzioni.