【jQuery】セレクトボックスの選択要素を抽出

##選択された単数要素を取り出す

基本はselectタグの属性を指定してval()で値を取得すればよいが、表示文字列を取得したいときはoption:selectedを指定する必要がある。

html

<select name='alphabet'>
    <option value='ABC'>えーびーしー</option>
    <option value='DEF'>でーいーえふ</option>
    <option value='GHI'>じーえいちあい</option>
    <option value='JKL'>じぇーけーえる</option>
</select>

js

$('[name=alphabet]').change(function() {
    // 選択されているvalue属性値を取り出す
    var val = $('[name=alphabet]').val();
    console.log(val); // 出力：ABC
    // 選択されている表示文字列を取り出す
    var txt = $('[name=alphabet] option:selected').text();
    console.log(txt); // 出力：えーびーしー
});

##選択された複数要素を取り出す

タグにmultiple属性が指定されており、複数要素を取り出す必要がある場合はどうなるか。

html

<select name='alphabet' multiple='multiple'>
    <option value='ABC'>えーびーしー</option>
    <option value='DEF'>でーいーえふ</option>
    <option value='GHI'>じーえいちあい</option>
    <option value='JKL'>じぇーけーえる</option>
</select>

js

// 前述のコードと同じ
$('[name=alphabet]').change(function() {
    var val = $('[name=alphabet]').val();
    console.log(val); // 出力：['ABC', 'DEF']
    var txt = $('[name=alphabet] option:selected').text();
    console.log(txt); // 出力：えーびーしーでーいーえふ
});

前述したコードでは、値を取り出した場合は配列として取得できるようだが、表示文字列はすべて連結された一文字列として取得される。
例えば、同じように配列として各表示文字列を取得したいのであれば、eachを使用して一つずつ配列にpushすればよい。

js

// 複数選択された表示文字列を配列として取得
$('[name=alphabet]').change(function() {
    var array = [];
    $('[name=alphabet] option:selected').each(function() {
        array.push($(this).text());
    });
    console.log(array); // 出力：["えーびーしー", "でーいーえふ"]
});