outerHTML和属性更新

Question

我试图将HTML代码作为带有属性更新的字符串。

我有一个select标记，我使用JavaScript更新它的选项。

默认情况下，第一个option是使用selected="selected"属性的selected。

如果我将selected从使用option1.selected = false的第一个选项中取消，并为第二个option设置option2.selected = true，然后调用select的outerHTML，则得到

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

如您所见，selected属性仍然位于第一个option上，而它已被移动到第二个option上。预期结果是

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

下面是一个示例http://jsbin.com/adAbAMe/2/edit?html,js,console,output (单击run with js以获得结果)，它显示，如果selected属性已被更改，则不会更改selected代码。

但是，我需要从outerHTML获得最终的HTML和成功的属性更新，因为如果我将这个select移到某个地方，在使用JavaScript之前我就不会得到任何更新。

是否有任何方法将HTML作为带有实际属性值的字符串？

Answer 1

selected属性不会自动更新，但可以将其设置为被删除并添加到适当的元素中。

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

这是一把有用的小提琴。

Answer 2

您可以使用

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

和

option.removeAttribute('selected');

Answer 3

试一试

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

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

演示：小提琴