タイトルにもあるように、1つ目のセレクトボックスで指定した内容によって2つ目のセレクトボックスの選択肢を変更させたいと思い試行錯誤したので残します。
JavaScriptを使ってこれを動的に生成させます。
セレクトボックスの中身は、実用的にPHPを使ってDBから取得してきたものを使います。
HTMLでセレクトボックスの生成
まずHTMLで1つ目のセレクトボックスを作成します。
２つ目のセレクトボックスは空っぽで生成しておく。
<select name="hoge"onChange="functionName()">
<option value=""></option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select class="td-text" name="fuga">
</select>
PHPでセレクトボックス中身をDB取得
次にPHPを使ってDBから2つ目のセレクトボックスの中身を取得する。
こればDBからの取得でなくてもOK。配列の形になれは問題ない。
下記でやっている事は…
１）配列と変数の定義
２）DBからデータ取得。定義した配列に格納。
３）JavaScriptへjsonを使い受け渡し。
これを１つ目のセレクトボックスの選択肢の数分行う。
$hoge_c[]=array();
$step_c=0;
$stmt= $pdo->prepare ("SQL文");//SQL生成
$stmt->execute();//クエリ実行
foreach ( $stmt->fetchAll() as $row ) {//取得データの最終行までループ
$hoge_c[]=[$row ['code'],$row ['name']];//多次元配列に格納
$step_c++;
}
$php_json_c = json_encode($hoge_c);//jsへ受け渡し
$php_json_sc = json_encode($step_c);JSで動的に生成させる
前項でPHPから受け取った配列を使用してセレクトボックスの中身を動的に変化させる動きをつける。
1）PHPから変数を受け取る
2）HTMLで生成したセレクトボックスのnameを指定して変数を宣言
1つ目と2つ目のセレクトボックスを定義する。
3）2）で定義したセレクトボックスのvalueが〇〇だったらというif文を記述。
if分は1つ目のセレクトボックスの選択肢分記述を行う。
その中で、1）で受け取った配列の中身を取り出して出力を行う。
function functionName(){
//PHPから受け取り
var js_array_c = JSON.parse('<?php echo $php_json_c; ?>');
var js_array_d = JSON.parse('<?php echo $php_json_d; ?>');
var js_array_e = JSON.parse('<?php echo $php_json_e; ?>');
var js_array_sc = JSON.parse('<?php echo $php_json_sc; ?>');
var js_array_sd = JSON.parse('<?php echo $php_json_sd; ?>');
var js_array_se = JSON.parse('<?php echo $php_json_se; ?>');
var select1 = document.forms.formName.hoge; //変数select1を宣言
var select2 = document.forms.formName.fuga; //変数select2を宣言
select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要
if (select1.options[select1.selectedIndex].value == "C"){
for(let step =0; step<js_array_sc+1; step++){
select2.options[step] = new Option(js_array_c[step][1],js_array_c[step][0]);//引数{text.value,defaultselect(ture)}
}
}
else if (select1.options[select1.selectedIndex].value == "D"){
for(let step =0; step<js_array_sd+1; step++){
select2.options[step] = new Option(js_array_d[step][1],js_array_d[step][0]);//引数{text.value,defaultselect(ture)}
}
}
else if (select1.options[select1.selectedIndex].value == "E"){
for(let step =0; step<js_array_se+1; step++){
select2.options[step] = new Option(js_array_e[step][1],js_array_e[step][0]);//引数{text.value,defaultselect(ture)}
}
}
}
結果
これにより選択したセレクトボックスの値によって、2つ目の選択肢の内容が動的に変わる仕組みが実現出来る。
アンケートとかに使えそうだと思った…。
IT企業勤務でブラックな会社の人は、未払金を勝ち取った記事で方法紹介してます👇
HTML、CSS、JavaScriptのTipsは下記記事をCheck It Out！👇
