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

属性とプロパティの2 つselectedのがあります。selectedselected

HTMLselected="selected"属性は、JavaScript の boolean プロパティの初期状態を設定しますselectedが、その後はすべてのフォーム フィールドの状態と同様に独立しています。

選択ボックスでオプションをクリックして選択すると、HTMLselected="selected"属性が HTMLOptionElement DOM ノードに追加されないため、要素のinnerHTML/に反映されません。html()代わりに、基になるフォーム コンテンツをoption.selectedプロパティによって反映されるように設定するだけです。

selectedバージョン 8 より前の IE では、HTML属性を設定することさえできませんsetAttribute。試してみると、実際にselectedブール値のプロパティが設定されます。

attr()jQuery では、属性アクセスとプロパティ アクセスの一種のハイブリッドであり、これらの問題を敷物の下で一掃しようとします。しかし、結論としては、booleanプロパティattr('selected')を使用するのと実質的に同じです。selected

于 2009-09-08T09:44:19.247 に答える
1

まず、<option>a を段落で囲むべきではありません。これは、見ている奇妙な動作の原因となる可能性があります。また、「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 で見られるアイテムが選択されているということですが、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 に答える