Question

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

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

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

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

<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代码中的属性不会更改。< / p>

但是我需要通过成功的属性更新从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

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');
})

演示：Fiddle

Answer 4

来自DOM Specification：

布尔

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

（强调我的）

要获得您正在寻找的效果，您需要option.setAttribute('selected', 'selected')，但在其他选项上您还需要option.removeAtrribute('selected')。

outerHTML和属性更新

4 个答案: