WEB
セレクトボックスの条件分岐と、選択項目によって遷移先を変える方法
2024.07.15
2024.08.07
セレクトボックスのよくある利用方法の一つとして条件分岐があり、さらに選択項目別にページ遷移を行いたい場合があります。また、段階的にしかセレクトボックスを選択できなくし、他のセレクトボックスを操作すると操作以外のセレクトボックスはリセットします。
- #css
- #html
- #js
セレクトボックスの条件分岐と項目別遷移の完成系
セレクトボックスAとBを準備し、Aの選択項目によってBの中身を変更します。
また、セレクトボックスAが選択されないとBを選択できないように、Bの項目が選択されると項目に応じたページに遷移させるような仕様の想定です。
See the Pen セレクトボックスの条件分岐と、選択項目によって遷移先を変える方法 by perenote (@perenote) on CodePen.
今回作成するセレクトボックスの解説
セレクトボックスAとBを用意する
まずはセレクトボックスを二つ準備します。
Aの項目は最初から表示させる内容（option）を記述しておき、Bは初期状態ではひとつだけで大丈夫です。
<section class="u-select">
<h2>セレクトボックスA</h2>
<label>
<select id="primary">
<option value="">選択してください</option>
<option value="item01">item01</option>
<option value="item02">item02</option>
<option value="item03">item03</option>
</select>
</label>
<h2>セレクトボックスB</h2>
<label>
<select id="secondary">
<option value="">選択してください</option>
</select>
</label>
</section>セレクトボックスBの項目をjsで準備
続いてセレクトボックスBの中身をjsで準備しておきます。
セレクトボックスAの値が変更された時に、Bで選択できる項目タイトルと選択された後に遷移するURLを準備しておきます。
// #secondaryの中身を準備
var items = {
item01:[
['選択してください',''],
['item01-01（Googleに遷移します）','https://www.google.co.jp/'],
['item01-02（yahooに遷移します）','https://www.yahoo.co.jp/'],
],
item02:[
['選択してください',''],
['item02-03（Googleに遷移します）','https://www.google.co.jp/'],
['item02-04（yahooに遷移します）','https://www.yahoo.co.jp/'],
],
item03:[
['選択してください',''],
['item03-05（Googleに遷移します）','https://www.google.co.jp/'],
['item03-06（yahooに遷移します）','https://www.yahoo.co.jp/'],
],
};
var none = $('#secondary').html(); //#secondaryの最初の状態
$("#secondary").attr("disabled", true); //#primaryが「選択してください」では操作不可に上記ではセレクトボックスAで「item01」「item02」「item03」が選ばれた場合のそれぞれの中身を記載しています。「選択してください」は初期状態で利用するのでURLは不要です。
また、BはAが選択されないと操作できない状態にしています。
セレクトボックスAの値が変更された時、Bの中身を表示して選択できるようにする
セレクトボックスAで選択された時の処理を記述しておきます。
$('#primary').on('change', function(){
var cont = $(this).val(); //選択された項目のvalueを取得
if(cont){ //valueに何か値が入っていた場合
var item = items[cont]; //リストからカテゴリに登録された製品の配列を取得
$("#secondary").attr("disabled", false); //#secondaryを選択可能に
$('#secondary').html('');
var option;
for(var i = 0; i < item.length; i++){
option = '<option value="' + item[i][1] + '">' + item[i][0] + '</option>';
$('#secondary').append(option);
}
} else { //valueに何も値が入っていない場合
$("#secondary").attr("disabled", true);
$('#secondary').html(none); //保存された最初の状態に戻す
}
});セレクトボックスBで選択された項目別にページを遷移させる
$('#secondary').on('change', function(){
if( $(this).val() ) {
window.open($(this).val(), '_blank') //外部遷移させる
}
});上記の記述でセレクトボックスBで値を変更した際に、値に応じたURLに外部遷移させています。
もし外部遷移が必要なければ、window.open($(this).val(), ‘_blank’) の箇所を、window.location.href = $(this).val()に変えてください。
まとめ
例えば、各都道府県を選択してその後の市区町村別に採用ページがあるようなサイトや、商品のカテゴリを選択した後に各商品別の説明書・詳細を表示させたりなどで活用ができます。
さらに複雑に条件分岐を行う事も可能ですが、個人的には階層を深くしてしまうと管理が難しくなってしまうのでそういったパターンでは使用しないようにしています。。
ただ、条件さえ合っていればスペースを確保できたり、余計な選択肢を表示させなくてもよいので活用方法次第でよいUI設計になると思います。是非ご活用ください。