outerHTML e atualizações de atributos

Question

Estou tentando obter o código HTML como uma string com as atualizações de atributos.

Eu tenho um select tag, cujas opções eu atualizo usando JavaScript.

Por padrão, um primeiro option é selected usando o atributo HTML selected="selected".

Se eu desmarcar selected da primeira opção usando option1.selected = false E definir option2.selected = true para o segundo option, e, em seguida, ligue para o outerHTML de um select, Eu recebo

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

Como você pode ver, selected atributo ainda está no primeiro option, embora tenha sido movido para o segundo option.O resultado esperado é

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

Aqui está um exemplo http://jsbin.com/adAbAMe/2/edit?html,js,console,saída (clique run with js para obter um resultado) que mostra que, se um selected atributo foi alterado, ele não muda no código HTML.

Mas preciso obter o HTML final do outerHTML com as atualizações de atributos bem-sucedidas, porque se eu mover isso select em algum lugar não receberei nenhuma atualização que fiz antes de usar JavaScript.

Existe algum método para obter o HTML como uma string com os valores reais dos atributos?

Answer 1

O selected O atributo não é atualizado automaticamente, mas você pode configurá-lo para ser removido e adicionado aos elementos apropriados.

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

Aqui está um violino funcionando.

Answer 2

Você pode usar

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

e

option.removeAttribute('selected');

Answer 3

Tentar

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

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

Demonstração: Violino

Answer 4

De Especificação DOM:

selecionado do tipo boleano

Representa o estado atual do controle de formulário correspondente, em um agente de usuário interativo.Alterar este atributo altera o estado do controle do formulário, mas não altera o valor do atributo HTML selecionado do elemento.

(ênfase minha)

Para obter o efeito que procura, você deseja option.setAttribute('selected', 'selected'), embora você também precise option.removeAtrribute('selected') nas outras opções.