かなり初歩的な質問です。
さまざまなサイトを参考にしながら、セレクトボックスの絞り込みの処理を行いました。
ですが、同じページ内に同じタイプのセレクトボックス群が複数あり、それぞれを別々に動くようにしたいと思っておりますが、うまくいきません。
下記の処理はid指定ですが、指定をclassに変更して試してみましたが、処理が反映されませんでした。
こういった場合、セレクタの指定はどのようにするべきでしょうか?
HTML
<dd class="c-formBlock__in data-multi-select"> <select name="" id="pref-data" class="select-pref" data-select="pref" > <option value="0" data-value="">下記よりお選び下さい</option> </select> <select name="city4" id="city-data" class="select-city" data-select="city" disabled> <option value="0" data-pref="" data-value="">下記よりお選び下さい</option> </select> <select name="city4" id="block-data" class="elect-block" data-select="block" disabled> <option value="0" data-city"">下記よりお選び下さい</option> </select> </dd>
JS
var data = [ { "pref":[ { "area": 1, "name": "東京都" }, { "area": 2, "name": "神奈川県" }, { "area": 3, "name": "千葉県" }, { "area": 4, "name": "埼玉県" } ], "city":[ { "name": "下記よりお選び下さい", "area": 0, "block": 0 }, { "name": "昭島市", "area": 1, "block": 1 }, { "name": "あきる野市", "area": 1, "block": 2 }, { "name": "愛甲郡愛川町", "area": 2, "block": 101 }, { "name": "愛甲郡清川村", "area": 2, "block": 102 }, { "name": "愛甲郡清川村", "area": 2, "block": 103 }, { "name": "千葉市中央区", "area": 3, "block": 201 }, { "name": "千葉市花見川区", "area": 3, "block": 202 }, { "name": "さいたま市北区", "area": 4, "block": 301 }, { "name": "さいたま市西区", "area": 4, "block": 302 } ], "block":[ { "name": "下記よりお選び下さい", "block": 0 }, { "name": "つつじが丘1丁目", "block": 1 }, { "name": "つつじが丘2丁目", "block": 1 }, { "name": "三内", "block": 2 }, { "name": "上ノ台", "block": 2 }, { "name": "三増", "block": 101 }, { "name": "中津", "block": 101 }, { "name": "宮ヶ瀬", "block": 102 }, { "name": "煤ヶ谷", "block": 102 }, { "name": "中央港1丁目", "block": 201 }, { "name": "中央港2丁目", "block": 201 }, { "name": "こてはし台1丁目", "block": 202 }, { "name": "こてはし台2丁目", "block": 202 }, { "name": "プラザ", "block": 301 }, { "name": "三橋5丁目", "block": 301 }, { "name": "今羽町", "block": 302 }, { "name": "別所町", "block": 302 } ] } ]; jQuery(document).ready(function($) { for(var i in data) { for(var j in data[i]["pref"]) { var appendObj = '<option value="" data-value="' + data[i]["pref"][j].area + '">' + data[i]["pref"][j].name + '</option>'; $(".pref-data").append(appendObj); } } // 都道府県データを全件表示する関数をセット function prefDataAll(data){ for(var i in data) { for(var j in data[i]["city"]) { var appendObj2 = '<option value="" data-pref="' + data[i]["city"][j].area + '" data-value="' + data[i]["city"][j].block + '">' + data[i]["city"][j].name + '</option>'; $(".city-data").append(appendObj2); } } } function prefDataAll(data){ for(var i in data) { for(var j in data[i]["block"]) { var appendObj3 = '<option value="" data-city="' + data[i]["block"][j].block + '">' + data[i]["block"][j].name + '</option>'; $(".block-data").append(appendObj3); } } } // 都道府県データをselectに表示 prefDataAll(data); $(".pref-data").on('change' , function(){ // 都道府県データをselectから一度全消去 $(this).next(".city-data").empty(); $(this).next(".city-data").prop('disabled',false); // 選択したエリアのvalueを変数へ入れる var areaNo = $(this).find('option:selected').attr("data-value"); console.log(areaNo); if ($(this).val() == "0") { // 選択したエリアのvalueが0なら全表示の関数を呼び出す prefDataAll(data); } else { // 選択したエリアのvalueが0以外ならソート表示の関数を呼び出す prefData(data); } // 都道府県データをソート表示する関数をセット function prefData(data){ for(var i in data) { for(var j in data[i]["city"]) { if (data[i]["city"][j].area == areaNo) { var appendObj2 = '<option value="" data-pref="' + data[i]["city"][j].area + '" data-value="' + data[i]["city"][j].block + '">' + data[i]["city"][j].name + '</option>'; $(".city-data").append(appendObj2); } } } } }); $(".city-data").on('change' , function(){ // 都道府県データをselectから一度全消去 $(this).next(".block-data").empty(); $(this).next(".block-data").prop('disabled',false); // 選択したエリアのvalueを変数へ入れる var areaNo = $(this).find('option:selected').attr("data-value"); console.log(areaNo); if ($(this).val() == "0") { // 選択したエリアのvalueが0なら全表示の関数を呼び出す prefDataAll(data); } else { // 選択したエリアのvalueが0以外ならソート表示の関数を呼び出す prefData(data); } // 都道府県データをソート表示する関数をセット function prefData(data){ for(var i in data) { for(var j in data[i]["block"]) { if (data[i]["block"][j].block == areaNo) { var appendObj3 = '<option value="" data-city="' + data[i]["block"][j].block + '">' + data[i]["block"][j].name + '</option>'; $(".block-data").append(appendObj3); } } } } }); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/13 06:36