直接の原因は select 要素に value は無いためです。下記のようにしても サンプル2 が選択されないことからわかると思います。
lang
1<select id="select" value="2">
2 <option value="1">サンプル1</option>
3 <option value="2">サンプル2</option>
4 <option value="3">サンプル3</option>
5</select>
次のようにする必要があります。
lang
1<select id="select">
2 <option value="1">サンプル1</option>
3 <option value="2" selected>サンプル2</option>
4 <option value="3">サンプル3</option>
5</select>
jQuery の val()
はこの辺りを隠蔽してあたかも select 要素に value 属性があるかのように扱えるようになっているだけです。
なので、attr で直接属性値を変更しても上手く動作しません。
また、フォーム部品な要素(input とか select とか)で、値の操作するために attr を使うのは悪手です。
例えば、下記のコードでテキストボックスの値を書き換えてからボタンを押してコンソールを出力を見ると、
予想に反する出力になるかもしれません。
lang
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script><script src="jquery-1.11.3.min.js"></script>
7 <script>
8 $(function() {
9 $("#button").click(function() {
10 console.log($('#text').attr('value'));
11 console.log($('#text').prop('value'));
12 console.log($('#text').val());
13 });
14 });
15 </script>
16</head>
17<body>
18 <input type="text" id="text" value="hogehoge">
19 <button id="button">ボタン</button>
20</body>
21</html>
これは、テキストボックスの値が書き換えられた時に、value 属性の値と、テキストボックスの値が、別のものになるために起こります。
select 要素でも次のようなコードで attr の問題が確認できると思います。
lang
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script><script src="jquery-1.11.3.min.js"></script>
7 <script>
8 $(function() {
9 $("#button").click(function() {
10 console.log("サンプル1: " + $('#select option[value=1]').attr('selected'));
11 console.log("サンプル2: " + $('#select option[value=2]').attr('selected'));
12 console.log("サンプル3: " + $('#select option[value=3]').attr('selected'));
13 });
14 });
15 </script>
16</head>
17<body>
18 <select id="select">
19 <option value="1">サンプル1</option>
20 <option value="2" selected>サンプル2</option>
21 <option value="3">サンプル3</option>
22 </select>
23 <button id="button">ボタン</button>
24</body>
25</html>
セレクトボックスでどの項目が選択されているかに無関係に、あたかも サンプル2 が選択されているように見えると思います。
JunTomizawa さんからコメントで以下の質問があったので補足しておきます。
ngyukiさん
値を取得ではなくセットするのもやはりpropじゃないと違いが出ますか?
lang
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
7 <script>
8 $(function() {
9 $("#attr").click(function() {
10 $('#select option[value=C]').attr("selected", true);
11 });
12 $("#prop").click(function() {
13 $('#select option[value=D]').prop("selected", true);
14 });
15 });
16 </script>
17</head>
18<body>
19 <form>
20 <select id="select">
21 <option value="A">A</option>
22 <option value="B">B</option>
23 <option value="C">C</option>
24 <option value="D">D</option>
25 </select>
26 <button type="button" id="attr">attr</button>
27 <button type="button" id="prop">prop</button>
28 <button type="reset">reset</button>
29 </form>
30</body>
31</html>
attr ボタンは attr()
で C を選択、prop ボタンは prop()
で D を選択します。
画面を開いた直後なら attr ボタンは正常に機能しますが、セレクトボックスを適当に切り替えたり prop ボタンを押したりすると attr ボタンは機能しなくなります。
その後、reset ボタンを押すと、C が選択されます(一度も attr ボタンを押していなければ A にリセットされるはずです)。
この動きから推測できると思いますが、attr によって変更されるのは項目のデフォルト値です。画面を開いた直後に attr ボタンが効いているように見えるのは、デフォルト値が現在値として参照されているためです。セレクトボックスをユーザーが操作したり、prop()
で値を変更したりすると、デフォルト値が現在値ではなくなるので、attr()
が効かなくなります(効かなくなるというか、デフォルト値が変わっても現在値には影響しなくなる)。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/12 23:14 編集
2015/07/12 23:10
2015/07/13 05:29
2015/07/13 11:02
2015/07/14 15:42
2015/07/15 00:05
2015/07/15 00:13