本家SOより自分がうまくいかなかったコードを追加して転載しています。
jQuery
のセレクタで select ボックスで選択されている textNode の値を取得する方法が分からないです。
var areaSelect = $("#area");
var area = areaSelect.text()
とやってしまうと、ドロップダウンに含まれている値が全部選択されてしまいます。
本家SOより自分がうまくいかなかったコードを追加して転載しています。
jQuery
のセレクタで select ボックスで選択されている textNode の値を取得する方法が分からないです。
var areaSelect = $("#area");
var area = areaSelect.text()
とやってしまうと、ドロップダウンに含まれている値が全部選択されてしまいます。
以下のような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();
です。
<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>
変数に渡しておくという前提であれば、こんなので表示は可能です。
<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様の書き方のほうがいいかと思います