代码之家 › 专栏 › 技术社区 › Imran

jquery的属性操作不一致

option attributes dom jquery javascript

Imran · 技术社区 · 15 年前

$('<option selected="selected">something</option>')
.removeAttr('selected')
.wrap('<p></p>').parent().html();

结果在

<option>something</option>

应该是。但是,如果在删除“selected”属性后将其放回(或 <option> 标记没有“selected”属性),我得到相同的输出。

$('<option selected="selected">something</option>')
.removeAttr('selected')
.attr('selected', 'selected')
.wrap('<p></p>').parent().html();

为什么会这样?

3 回复 | 直到 15 年前

bobince 15 年前

有两个 selected S 挑选出来的 属性和 挑选出来的 财产。

HTML selected="selected" 属性设置javascript的初始状态 挑选出来的 布尔属性,但之后,和所有表单字段状态一样,它们是独立的。

如果通过在“选择”框中单击该选项来选择该选项,则不会添加HTML selected=“已选择” 属性设置为htmloptionelement dom节点,因此不会在 innerHTML / html() 元素的。相反,它只是将基础表单内容设置为 option.selected 属性。

IE在版本8之前甚至不允许您设置HTML 挑选出来的 属性,因为 setAttribute 那里坏了。如果你尝试,它会设置 挑选出来的 布尔属性。

attr() jquery是一种属性访问和属性访问的混合体,试图将这些问题排除在地毯下。但结果是 attr('selected') 实际上与使用布尔值相同 挑选出来的 财产。

James 15 年前

首先,一个 <option> 不应该用段落包装-这可能是你看到的一些奇怪行为的原因。此外,“selected”属性可能不会在HTML标记中表示,但它正在计算的位置进行设置,即dom“selected”属性。

var option = $('<option selected="selected">something</option>');
option.removeAttr('selected').attr('selected', 'selected');

option[0].selected === true;

andres descalzo 15 年前

看到这个分析,可以在dom中看到,它是被选中的项,但是看不到html的文本。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">

$(function(){

    var opc0 = document.createElement("option");
    var theText = document.createTextNode("something 0");

    opc0.appendChild(theText)
    opc0.setAttribute("selected", "selected");
    opc0.removeAttribute("selected");
    opc0.setAttribute("selected", "selected");

    var opc1 = $("<option value=\"test\" label=\"tlabel\" selected=\"selected\">something 1</option>");

    opc1.removeAttr("label");
    opc1.removeAttr("selected");

    opc1.attr("selected", "selected");
    opc1.attr("label", "tlabel2");

    var opc2 = $("<option label=\"tlabel\" selected=\"selected\">something 2</option>");

    opc2.removeAttr("selected")

    var opc3 = $("<select id=\"selectTest\"></select>");
    var opc3a = $("<option value=\"a\" selected=\"selected\">something 3 a</option>");
    var opc3b = $("<option value=\"b\">something 3 b</option>");
    var opc3c = $("<option value=\"c\">something 3 c</option>");
    var opc3d = $("<option value=\"d\">something 3 d</option>");
    var opc3e = $("<option value=\"e\">something 3 e</option>");
    var opc3f = $("<option value=\"f\">something 3 f</option>");

    opc3.append(opc3a);
    opc3.append(opc3b);
    opc3.append(opc3c);
    opc3.append(opc3d);
    opc3.append(opc3e);
    opc3.append(opc3f);
    opc3a.removeAttr("selected");
    opc3.val("a");

    var html0 = opc0.outerHTML;
    var html1 = opc1.parent().html();
    var html2 = opc2.parent().html();
    var html3 = opc3.parent().html();

    $("#preTest0").text(html0); //ok
    $("#preTest1").text(html1); //err
    $("#preTest2").text(html2); //ok
    $("#preTest3").text(html3); //err

    $(document.body)
        .append(opc1)
        .append(opc3);

    $("#selectTest option:eq(4)").attr("selected","selected");
    $("#selectTest option:selected").each(function () { $("#preTest5").text( $("#preTest5").text() + $(this).text() + " is selected "); }); 

    var html4 = opc3.html();
    $("#preTest4").text(html4); //ok accion, err html view
});
</script>
</head>
<body>
<pre id="preTest0"></pre><br />
<pre id="preTest1"></pre><br />
<pre id="preTest2"></pre><br />
<pre id="preTest3"></pre><br />
<pre id="preTest4"></pre><br />
<pre id="preTest5"></pre><br />
</body>
</html>