質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

jQuery valとattr('value','値')の違いについて

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 13K+

score 589

質問があります。
結論から言うと、以下のval()は予想した動きをし、
attr('value','値')を使った場合は予想した動きをしません。
なぜでしょうか?attr()の書き方が悪かったり、何かケアレスミスがあるでしょうか?
もしくはattr()の特徴が関係していたりするのでしょうか?

ちなみに予想した動きとはわかるとは思いますが、
「セレクトボックスを変更した際、そのセレクトボックスの値を何を選択したかにかかわらず、
サンプル3( val()の場合は2 )にする」という動きです。

わかる方がいれば宜しくお願いします。



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>セレクトボックスの操作</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function() {
    $(".x").click(function() {
        $(this).val("2");
        $(this).attr('value',"3");
    });
});
</script>
</head>
<body>
<div class="sss">
<select name="example1" class="x">
<option value="1">サンプル1</option>
<option value="2">サンプル2</option>
<option value="3">サンプル3</option>
</select>
</div>
<div class="sss">
<select name="example2" class="x">
<option value="1">サンプル1</option>
<option value="2">サンプル2</option>
<option value="3">サンプル3</option>
</select>
</div>
<div class="sss">
<select name="example3" class="x">
<option value="1">サンプル1</option>
<option value="2">サンプル2</option>
<option value="3">サンプル3</option>
</select>
</div>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+2

これでどうですかね?
$('option[value=3]',this).attr('selected',true);
select要素の場合optionにselectedを付けないとダメだったような。
間違っていたらすいません><

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/15 00:42

    ngyukiさん
    値を取得ではなくセットするのもやはりpropじゃないと違いが出ますか?

    キャンセル

  • 2015/07/15 09:05

    JunTomizawa さん
    値のセットでも prop と attr で違いがでます。フォーム部品の要素の value などを attr で更新するとかなり予測しにくい動きになります。attr は初期値、prop は現在値、と考えておくといいです。

    キャンセル

  • 2015/07/15 09:13

    わたしの回答に詳細を追記しておきました

    キャンセル

+2

このページを参考にされてはいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/13 06:08

    half_sleepingさん、返答ありがとうございます!

    私もこの記事は見たのですが、やはりこの記事の内容が上の場合でも該当するのでしょうか?
    ということは書き方が間違っているというわけではなく、attr()の特性によって単純に動かないと捉えてよいという認識でよいのでしょうか?
    上の場合はattr()は使うべきでないという認識でいいということでしょうか?

    もしお答え頂けるなら返答して頂けると幸いです。

    キャンセル

  • 2015/07/13 06:11

    ちなみにval()の行をコメントアウトした場合もattr()の行は機能しないのですが、それも記事の内容に当てはまるのでしょうか?

    いろいろ質問してすいません。

    キャンセル

+1

直接の原因は select 要素に value は無いためです。下記のようにしても サンプル2 が選択されないことからわかると思います。

<select id="select" value="2">
    <option value="1">サンプル1</option>
    <option value="2">サンプル2</option>
    <option value="3">サンプル3</option>
</select>

次のようにする必要があります。

<select id="select">
    <option value="1">サンプル1</option>
    <option value="2" selected>サンプル2</option>
    <option value="3">サンプル3</option>
</select>

jQuery の val() はこの辺りを隠蔽してあたかも select 要素に value 属性があるかのように扱えるようになっているだけです。
なので、attr で直接属性値を変更しても上手く動作しません。


また、フォーム部品な要素(input とか select とか)で、値の操作するために attr を使うのは悪手です。
例えば、下記のコードでテキストボックスの値を書き換えてからボタンを押してコンソールを出力を見ると、
予想に反する出力になるかもしれません。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script><script src="jquery-1.11.3.min.js"></script>
    <script>
    $(function() {
        $("#button").click(function() {
            console.log($('#text').attr('value'));
            console.log($('#text').prop('value'));
            console.log($('#text').val());
        });
    });
    </script>
</head>
<body>
    <input type="text" id="text" value="hogehoge">
    <button id="button">ボタン</button>
</body>
</html>

これは、テキストボックスの値が書き換えられた時に、value 属性の値と、テキストボックスの値が、別のものになるために起こります。

select 要素でも次のようなコードで attr の問題が確認できると思います。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script><script src="jquery-1.11.3.min.js"></script>
    <script>
    $(function() {
        $("#button").click(function() {
            console.log("サンプル1: " + $('#select option[value=1]').attr('selected'));
            console.log("サンプル2: " + $('#select option[value=2]').attr('selected'));
            console.log("サンプル3: " + $('#select option[value=3]').attr('selected'));
        });
    });
    </script>
</head>
<body>
    <select id="select">
        <option value="1">サンプル1</option>
        <option value="2" selected>サンプル2</option>
        <option value="3">サンプル3</option>
    </select>
    <button id="button">ボタン</button>
</body>
</html>

セレクトボックスでどの項目が選択されているかに無関係に、あたかも サンプル2 が選択されているように見えると思います。


JunTomizawa さんからコメントで以下の質問があったので補足しておきます。

ngyukiさん
値を取得ではなくセットするのもやはりpropじゃないと違いが出ますか?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
    $(function() {
        $("#attr").click(function() {
            $('#select option[value=C]').attr("selected", true);
        });
        $("#prop").click(function() {
            $('#select option[value=D]').prop("selected", true);
        });
    });
    </script>
</head>
<body>
    <form>
        <select id="select">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select>
        <button type="button" id="attr">attr</button>
        <button type="button" id="prop">prop</button>
        <button type="reset">reset</button>
    </form>
</body>
</html>

attr ボタンは attr() で C を選択、prop ボタンは prop() で D を選択します。

画面を開いた直後なら attr ボタンは正常に機能しますが、セレクトボックスを適当に切り替えたり prop ボタンを押したりすると attr ボタンは機能しなくなります。

その後、reset ボタンを押すと、C が選択されます(一度も attr ボタンを押していなければ A にリセットされるはずです)。

この動きから推測できると思いますが、attr によって変更されるのは項目のデフォルト値です。画面を開いた直後に attr ボタンが効いているように見えるのは、デフォルト値が現在値として参照されているためです。セレクトボックスをユーザーが操作したり、prop() で値を変更したりすると、デフォルト値が現在値ではなくなるので、attr() が効かなくなります(効かなくなるというか、デフォルト値が変わっても現在値には影響しなくなる)。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/13 20:12

    ngyukiさん
    返答ありがとうございます!すごくスッキリしました。
    確かに投稿してからselectedを付与する書き方にしないといけないのではと思ったのですが、それだとval()の辻褄が合わず、納得がいっていませんでした。val()は隠蔽していたのですね。そのような特性に気づかせてくださったngyukiさんに感謝しています。
    BA他の方に先つけてしまいました。すいません。ありがとうございます。

    キャンセル

  • 2015/07/15 20:32

    普段からvalばかり使っていてその辺の動き全然知らなかったです!
    勉強になりましたー

    キャンセル

+1

こちらの記事を参考にされてはいかがでしょうか...

http://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1

要は、attrではなくpropを使った方が良いみたいです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/13 20:04

    Yousackさん返答ありがとうございます!
    propメソッドは知ってるのですがあまり使いこなせていないので、attr()の理解も含めその記事読ませていただきます。感謝しています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る