externalHTML y actualizaciones de atributos

Question

Estoy intentando obtener el código HTML como una cadena con las actualizaciones de atributos.

Tengo una select tag, cuyas opciones actualizo usando JavaScript.

Por defecto, una primera option es selected usando el atributo HTML selected="selected".

si me desarmo selected desde la primera opción usando option1.selected = false y establecer option2.selected = true para el segundo option, y luego llame al outerHTML de un select, Yo obtengo

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

Como se puede ver, selected El atributo todavía está en el primero. option, mientras que se ha trasladado al segundo option.El resultado esperado es

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

Aquí hay un ejemplo http://jsbin.com/adAbAMe/2/edit?html,js,console,output (hacer clic run with js para obtener un resultado) lo que demuestra que si un selected El atributo ha sido cambiado, no cambia en el código HTML.

Pero necesito obtener el HTML final de externalHTML con las actualizaciones de atributos exitosas, porque si muevo esto select En algún lugar no recibiré ninguna actualización que haya realizado antes de usar JavaScript.

¿Existe algún método para obtener el HTML como una cadena con los valores de los atributos reales?

Answer 1

El selected El atributo no se actualiza automáticamente, pero puede configurarlo para que se elimine y se agregue a los elementos adecuados.

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

Aquí hay un violín que funciona..

Answer 2

Puedes usar

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

y

option.removeAttribute('selected');

Answer 3

Intentar

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

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

Manifestación: Violín

Answer 4

Desde el Especificación DOM:

seleccionado de tipo booleano

Representa el estado actual del control de formulario correspondiente, en un agente de usuario interactivo.Cambiar este atributo cambia el estado del control de formulario, pero no cambia el valor del atributo HTML seleccionado del elemento.

(el énfasis es mío)

Para conseguir el efecto que buscas, deseas option.setAttribute('selected', 'selected'), aunque también necesitarás option.removeAtrribute('selected') en las otras opciones.