jQuery

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

More than 5 years have passed since last update.


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

基本は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); // 出力:["えーびーしー", "でーいーえふ"]
});