外部 HTML 和属性更新

Question

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

我有一个 select 标签，我使用 JavaScript 更新其选项。

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

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

<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,控制台,输出 （点击 run with js 得到结果）这表明，如果 selected 属性已更改，但 HTML 代码中没有更改。

但我需要从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');
})

演示： 小提琴

Answer 4

来自 DOM规范:

已选择 类型的 布尔值

表示交互式用户代理中相应表单控件的当前状态。更改此属性会更改表单控件的状态， 但不会更改元素的 HTML selected 属性的值。

（强调我的）

为了获得您想要的效果，您想要 option.setAttribute('selected', 'selected'), ，尽管你还需要 option.removeAtrribute('selected') 关于其他选项。