回答編集履歴
1
attr と prop でのセットの違い
answer
CHANGED
|
@@ -83,4 +83,53 @@
|
|
|
83
83
|
</html>
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
セレクトボックスでどの項目が選択されているかに無関係に、あたかも サンプル2 が選択されているように見えると思います。
|
|
86
|
+
セレクトボックスでどの項目が選択されているかに無関係に、あたかも サンプル2 が選択されているように見えると思います。
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
JunTomizawa さんからコメントで以下の質問があったので補足しておきます。
|
|
91
|
+
|
|
92
|
+
> ngyukiさん
|
|
93
|
+
> 値を取得ではなくセットするのもやはりpropじゃないと違いが出ますか？
|
|
94
|
+
|
|
95
|
+
```lang-html
|
|
96
|
+
<!DOCTYPE html>
|
|
97
|
+
<html>
|
|
98
|
+
<head>
|
|
99
|
+
<meta charset="UTF-8">
|
|
100
|
+
<title></title>
|
|
101
|
+
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
102
|
+
<script>
|
|
103
|
+
$(function() {
|
|
104
|
+
$("#attr").click(function() {
|
|
105
|
+
$('#select option[value=C]').attr("selected", true);
|
|
106
|
+
});
|
|
107
|
+
$("#prop").click(function() {
|
|
108
|
+
$('#select option[value=D]').prop("selected", true);
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
</script>
|
|
112
|
+
</head>
|
|
113
|
+
<body>
|
|
114
|
+
<form>
|
|
115
|
+
<select id="select">
|
|
116
|
+
<option value="A">A</option>
|
|
117
|
+
<option value="B">B</option>
|
|
118
|
+
<option value="C">C</option>
|
|
119
|
+
<option value="D">D</option>
|
|
120
|
+
</select>
|
|
121
|
+
<button type="button" id="attr">attr</button>
|
|
122
|
+
<button type="button" id="prop">prop</button>
|
|
123
|
+
<button type="reset">reset</button>
|
|
124
|
+
</form>
|
|
125
|
+
</body>
|
|
126
|
+
</html>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
attr ボタンは `attr()` で C を選択、prop ボタンは `prop()` で D を選択します。
|
|
130
|
+
|
|
131
|
+
画面を開いた直後なら attr ボタンは正常に機能しますが、セレクトボックスを適当に切り替えたり prop ボタンを押したりすると attr ボタンは機能しなくなります。
|
|
132
|
+
|
|
133
|
+
その後、reset ボタンを押すと、C が選択されます（一度も attr ボタンを押していなければ A にリセットされるはずです）。
|
|
134
|
+
|
|
135
|
+
この動きから推測できると思いますが、attr によって変更されるのは項目のデフォルト値です。画面を開いた直後に attr ボタンが効いているように見えるのは、デフォルト値が現在値として参照されているためです。セレクトボックスをユーザーが操作したり、`prop()` で値を変更したりすると、デフォルト値が現在値ではなくなるので、`attr()` が効かなくなります（効かなくなるというか、デフォルト値が変わっても現在値には影響しなくなる）。
|