javascript - outerHTML 和属性更新

Question

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

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

默认情况下，第一个选项是使用HTML属性selected="selected"选择的。

如果我使用 option1.selected = false 从第一个选项取消设置 selected 并为第二个 设置 option2.selected = true >option，然后调用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 属性已更改，它不会在 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");
}

Here's a working fiddle .