【jQuery】セレクトで選択された値を取得する 単一選択・複数選択

なんだか最近、jqueryの記事ばっかり載せてます。。。それだけ頻繁に使うし、忘れやすいし、ってことですねー。

select 単一選択の場合の値の取得


例えば、こんなselectタイプがあったとして、

<select name='fruits'>
<option value='banana'>バナナ</option>
<option value='apple'>りんご</option>
<option value='grape'>ぶどう</option>
<option value='strawberry'>いちご</option>
</select>


選択されている値をとるためのjqueryは、

$('[name=fruits]').change(function() {
var fruit = $(this).val();
console.log(fruit); 
});

この場合、「val」を取得しているので、”バナナ”が選択されていれば、出力は、

“banana”

になります。

ところで、valueではなく、選択肢のテキストを取得したいような場合もあります。
その場合は、

$('[name=fruits]').change(function() {
var fruit_text = $([name=fruits] option:selected).text();
console.log(fruit_text); 
});
<wbr>


これで、

“バナナ”

が表示される。

select 複数選択の場合の値の取得


複数選択可能なセレクトボックスにした場合、複数の値をどうやって取るのか。

<select name='fruits' multiple='multiple'>
<option value='banana'>バナナ</option>
<option value='apple'>りんご</option>
<option value='grape'>ぶどう</option>
<option value='strawberry'>いちご</option>
</select>


“multiple”が複数選択可能なセレクトボックスですね。

このケースで、もし先ほどと同じjqueryにすると、

$('[name=fruits]').change(function() {
var fruit = $(this).val();
console.log(fruit); 
});
//バナナといちごを選択している場合、
//出力は、
//['banana', 'strawberry']
$('[name=fruits]').change(function() {
var fruit_text = $([name=fruits] option:selected).text();
console.log(fruit_text); 
});
//バナナといちごを選択している場合、
//出力は、
//バナナいちご


となります。

valueについては配列で返ってくるので扱いやすいですが、textの方は、値が連結されてしまいます。
これはあまり使い勝手がよろしくないですね。

テキストを分けたい場合(というか、「分けたくない」方がレアだと思いますが)、

$('[name=fruits]').change(function() {
var fruit_text_array = [];
$('[name=fruits] option:selected').each(function() {
fruit_text_array.push($(this).text());
});
});
//バナナといちごを選択している場合、
//出力は、
//['バナナ', 'いちご']


てな感じで、「each」で一つずつ取得して、配列にpushすればよいです。

あわせて読みたい