jQuery で select ボックスで選択された値を取得する
[本家SO](https://stackoverflow.com/questions/1643227/get-selected-text-from-
drop-down-list-select-box-using-jquery)より自分がうまくいかなかったコードを追加して転載しています。

`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();
    
```

です。
以下のような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();
    
```

です。