外部 HTML 和属性更新
-
26-12-2019 - |
题
我正在尝试将 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 作为具有真实属性值的字符串来获取?
解决方案
这 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");
}
其他提示
您可以使用
option.setAttribute('selected', 'selected');
和
option.removeAttribute('selected');
尝试
$('button').click(function () {
console.log($('select').prop('outerHTML'))
})
$('select').change(function(){
$(this).find('option[selected]').removeAttr('selected');
$(this).find('option:selected').attr('selected', 'selected');
})
演示: 小提琴
来自 DOM规范:
已选择 类型的 布尔值
表示交互式用户代理中相应表单控件的当前状态。更改此属性会更改表单控件的状态, 但不会更改元素的 HTML selected 属性的值。
(强调我的)
为了获得您想要的效果,您想要 option.setAttribute('selected', 'selected')
, ,尽管你还需要 option.removeAtrribute('selected')
关于其他选项。