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

Webデザイン入門オンライン講座 Udemy

なんだか最近、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すればよいです。