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