4

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

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

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

如果我使用和设置第二个selected选项从第一个选项中取消设置，然后调用a ，我得到option1.selected = falseoption2.selected = trueoptionouterHTMLselect

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

如您所见，selected属性仍在 first 上option，而已移至 second 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 作为具有真实属性值的字符串获取？

4

4 回答 4

3

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

这是一个工作小提琴。

于 2014-01-11T14:54:45.920 回答
0

您可以使用

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

和

option.removeAttribute('selected');
于 2014-01-11T14:54:24.763 回答
0

尝试

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

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

演示：小提琴

于 2014-01-11T14:55:59.230 回答
0

来自DOM 规范：

选择布尔类型

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

（强调我的）

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

于 2016-03-02T15:56:26.513 回答