2

本家SOより自分がうまくいかなかったコードを追加して転載しています。

jQuery のセレクタで select ボックスで選択されている textNode の値を取得する方法が分からないです。

var areaSelect = $("#area");
var area = areaSelect.text()

とやってしまうと、ドロップダウンに含まれている値が全部選択されてしまいます。

2
  • 1
    「値」がテキストノードなのかvalueなのかがイマイチわかりませんでしたので、両方書きましたが、できれば編集して明記していただけるといいと思います。 Commented 2014年12月8日 11:31
  • @ISHITOYAKentaro textNode でした。訂正しました。ありがとうございます! Commented 2014年12月8日 12:09

3 件の回答 3

5

以下のようなhtmlがあった時、

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<select id="area">
<option value="1">北海道</option>
<option value="2">青森</option>
<option value="3">秋田</option>
</select>
</body>
</html>

optionのvalue属性の値が欲しい時は、

$("#area option[value=1]").val();

optionのtextNodeの値が欲しい時は、

$("#area option[value=1]").text();

になります。選択されているoptionをselectしたい場合は、

$("#area option:selected").text();

です。

1
<p id="out"></p>
<select id="hogehoge">
    <option value="hoge1">hoge1</option>
    <option value="hoge2">hoge2</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var $hogehoge=$('#hogehoge');
    $('#out').text($hogehoge.children(':eq(0)').text());
</script>

変数に渡しておくという前提であれば、こんなので表示は可能です。

1
<select id="area">
    <option value="1">aaa</option>
    <option value="2">bbb</option>
    <option value="3">ccc</option>
</select>

とした場合に $("#area").text() だと

    <option value="1">aaa</option>
    <option value="2">bbb</option>
    <option value="3">ccc</option>

を取得してしまうということでしょか

だとすればoptionの要素のtextNodeが欲しい場合は セレクタにoption要素を追加する必要があります。 質問者様の書き方に合わせるとこんな感じでしょうか

var areaSelect = $("#area");
var area = areaSelect.children("option:selected").text();

個人的にはISHITOYA Kentaro様の書き方のほうがいいかと思います

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。