LoginSignup
9
4

More than 1 year has passed since last update.

DOMに設定したvalueをval()で取れない時の解決策

Last updated at Posted at 2020-03-14

概要

とりあえずDOMのタグにidvalueを付加して、jQuery$("#id").val()で取得しようとしたらうまくいかなかったときのメモ。

環境

  • macOS Catalina(10.15.2)
  • FireFox 72.0.2
  • jquery-3.4.1.min(CDN)

詳細

経緯

「『3月14日』と表示された日付のセルを選択したとき『0314』という文字列をjavascript側に渡したい」というようなことがあった。
jQueryについては「とりあえず要素にidを指定してvalueに値を入れれば$("#id").val()で取得できる」程度の理解だったので、

<td id="date1" value="0314">3月14日</td>

と書いて、

$("#date1").val()

で取ろうとしたら空の文字列しか取得できず「???」となった。

調査

簡単なテストファイルとスクリプトを作成して挙動を確認してみる。

test.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="test.js"></script>
  <table>
    <thead></thead>
    <tbody>
      <tr id="tr" value="tr">
        <th id="th" value="th">ヘッダ</th>
        <td id="td" value="td">データ</td>
      </tr>
    </tbody>
  </table>
  <div id="div" value="div">div</div>
  <span id="span" value="span">span</span><br>
  <input type="selectbox" id="selectbox" value="selectbox"><br>
  <input type="radio" id="radio" value="radio"><br>
  <button id="button" onclick="displayValue();">value</button><br>
</body>
</html>
test.js
function displayValue(){
  console.log($("#tr").val());
  console.log($("#th").val());
  console.log($("#td").val());
  console.log($("#div").val());
  console.log($("#span").val());
  console.log($("#selectbox").val());
  console.log($("#radio").val());
}

「value」ボタンをクリックして取得できる値を確認。
スクリーンショット 2020-03-14 14.37.12.png

……selectboxradioしか取得できていない。

原因

調べてみると、そもそもvalue属性はinput等の一部の要素でしか定義されていないようだ。
tdやらdivやらにvalueを付加してもそれはユーザ定義の属性になるので、.val()では値を取得できないらしい。

 参考:https://reference.hyper-text.org/html5/attribute/value

回避策

ユーザ定義の属性に対してその値を取得するには、.val()ではなく.attr("value")とすればよい。

(rewrite)test.js
function displayValue(){
  console.log($("#tr").attr("value"));
  console.log($("#th").attr("value"));
  console.log($("#td").attr("value"));
  console.log($("#div").attr("value"));
  console.log($("#span").attr("value"));
  console.log($("#selectbox").attr("value"));
  console.log($("#radio").attr("value"));
}

「value」ボタンをクリック。
スクリーンショット 2020-03-14 14.52.27.png

無事に取得できた。

後日談

HTML5には「独自データ属性」というものがあり、どうやらこれを使うのが正攻法のようだ。

<td id="date1" data-value="0314">3月14日</td>

値の取得には.data()を使えばOK。

$("#date1").data("value")

 参考:https://wp.tech-style.info/archives/102
    https://qiita.com/katsukii/items/c29b61b35d4919493e06

まとめ

  • .val()で取得できるvalue属性はinput等の一部の要素にしかない
  • tddiv等の要素にvalue属性を与えた場合は.attr("value")で取得できる
  • ちゃんとやるなら独自データ属性と.data()を使おう
9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4