2 
$('<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();

为什么会这样？

4

3 回答 3

2

有两个selected，selected属性和selected属性。

HTMLselected="selected"属性设置 JavaScript 布尔属性的初始状态selected，但之后，就像所有表单字段状态一样，它们是独立的。

如果您通过在选择框中单击该选项来选择该选项，它不会将 HTMLselected="selected"属性添加到 HTMLOptionElement DOM 节点，因此您不会在元素的innerHTML/中看到该属性。html()相反，它只是设置属性反映的基础表单内容option.selected。

8 版之前的 IE 甚至不允许你设置 HTMLselected属性，因为setAttribute那里已经坏掉了。如果您尝试，它实际上会设置selected布尔属性。

attr()在 jQuery 中是一种属性和属性访问的混合体，它试图将这些问题扫到地毯下。但结果是调用attr('selected')实际上与使用布尔selected属性相同。

于 2009-09-08T09:44:19.247 回答
1

首先，<option>不应将 an 包含在段落中 - 这可能会导致您看到一些奇怪的行为。此外，“selected”属性可能不会在 HTML 标记中表达，但它被设置在它重要的位置 - 即 DOM“selected”属性。

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

option[0].selected === true;
于 2009-09-08T07:33:17.190 回答
0

看到这个分析，在DOM中可以看出是被选中的item，但是看不到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>
于 2009-09-08T14:16:51.057 回答