456


[本家SO](https://stackoverflow.com/questions/1643227/get-selected-text-from-
drop-down-list-select-box-using-jquery)より自分がうまくいかなかったコードを追加して転載しています。

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

[code]

    var areaSelect = $("#area");
    var area = areaSelect.text()
    
[/code]

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


CC BY-SA 3.0
2014-12-08T10:57:29.230
455
2014-12-24T01:48:52.653
2017-05-23T12:38:55.307
-1
41
question
javascript jquery
jQuery で select ボックスで選択された値を取得する


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

[code]

    <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>
    
[/code]

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

[code]

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

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

[code]

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

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

[code]

    $("#area option:selected").text();
    
[/code]

です。


CC BY-SA 3.0
2014-12-08T11:17:25.860
456
2014-12-08T11:32:47.663
2014-12-08T11:32:47.663
351
351
455
answer

[code]

    <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>
    
[/code]

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


CC BY-SA 3.0
2014-12-08T13:41:31.057
460
2014-12-08T17:42:31.677
2014-12-08T17:42:31.677
905
905
455
answer

[code]

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

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

[code]

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

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

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

[code]

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

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


CC BY-SA 3.0
2014-12-24T01:48:52.653
2456
2014-12-24T01:48:52.653
5606
455
answer