ブログ
見えなくした筈なのに
ウェブページに沢山の入力項目があるフォームをパソコンで扱う際、入力項目の移動やセレクトボックスの選択をするためにマウスに持ちかえるのがどうしても面倒なので、キーボードだけで入力したいものです。
今回、あるセレクトボックスの選択肢に連動して、右隣のセレクトボックスの選択肢を絞り込む必要があるフォームを作っていて、絞り込みにjQueryの.hide()関数を用いたところ、プルダウンボタンをクリックした場合は確かに絞り込まれているのに、キーボードの上下キーで操作するとすべての選択肢が表示されてしまうことに気づきました。
これではキーボードだけ使う場合にはまずいので、結局非表示にしたいoptionタグのdisabled属性を.prop()関数で明示的にtrueにした上で、.hide()関数で非表示にしたところ、希望通りの動きになりました。
例えばフォーカスしているセレクトボックスの3番目の選択肢を表示させないようにするには、こんな感じです。
今回、あるセレクトボックスの選択肢に連動して、右隣のセレクトボックスの選択肢を絞り込む必要があるフォームを作っていて、絞り込みにjQueryの.hide()関数を用いたところ、プルダウンボタンをクリックした場合は確かに絞り込まれているのに、キーボードの上下キーで操作するとすべての選択肢が表示されてしまうことに気づきました。
これではキーボードだけ使う場合にはまずいので、結局非表示にしたいoptionタグのdisabled属性を.prop()関数で明示的にtrueにした上で、.hide()関数で非表示にしたところ、希望通りの動きになりました。
例えばフォーカスしているセレクトボックスの3番目の選択肢を表示させないようにするには、こんな感じです。
$(document).on('focus', '.hoge', function(){
$(this).find('option').eq(2).prop('disabled', true).hide();
});