jQuery で select ボックスで選択された値を取得する


[本家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]

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




以下のような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]

です。




以下のような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]

です。

