質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1621閲覧

セレクトボックスの絞り込みを、複数指定したい

ty-bigwave

総合スコア10

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/07/13 05:43

かなり初歩的な質問です。
さまざまなサイトを参考にしながら、セレクトボックスの絞り込みの処理を行いました。
ですが、同じページ内に同じタイプのセレクトボックス群が複数あり、それぞれを別々に動くようにしたいと思っておりますが、うまくいきません。
下記の処理は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); } } } } }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

正しく書き直しました。
id指定の箇所がclass指定になっているなど
基本的な記述が理解できていなかったので
以下のコードを何度も見直して何が問題だったか調べてみてください。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5</head> 6<body> 7<dd class="c-formBlock__in data-multi-select"> 8<select name="" id="pref-data" class="select-pref" data-select="pref"> 9 <option value="0" data-value="">下記よりお選び下さい</option> 10</select> 11 12<select 13 name="city4" 14 id="city-data" 15 class="select-city" 16 data-select="city" 17 disabled 18> 19 <option value="0" data-pref="" data-value="" 20 >下記よりお選び下さい</option 21 > 22</select> 23 24<select 25 name="city4" 26 id="block-data" 27 class="elect-block" 28 data-select="block" 29 disabled 30> 31 <option value="0" data-city="">下記よりお選び下さい</option> 32</select> 33</dd> 34<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 35<script> 36var data = [ 37 { 38 pref: [ 39 { area: 1, name: "東京都" }, 40 { area: 2, name: "神奈川県" }, 41 { area: 3, name: "千葉県" }, 42 { area: 4, name: "埼玉県" } 43 ], 44 45 city: [ 46 { name: "下記よりお選び下さい", area: 0, block: 0 }, 47 { name: "昭島市", area: 1, block: 1 }, 48 { name: "あきる野市", area: 1, block: 2 }, 49 { name: "愛甲郡愛川町", area: 2, block: 101 }, 50 { name: "愛甲郡清川村", area: 2, block: 102 }, 51 { name: "愛甲郡清川村", area: 2, block: 103 }, 52 { name: "千葉市中央区", area: 3, block: 201 }, 53 { name: "千葉市花見川区", area: 3, block: 202 }, 54 { name: "さいたま市北区", area: 4, block: 301 }, 55 { name: "さいたま市西区", area: 4, block: 302 } 56 ], 57 58 block: [ 59 { name: "下記よりお選び下さい", block: 0 }, 60 { name: "つつじが丘1丁目", block: 1 }, 61 { name: "つつじが丘2丁目", block: 1 }, 62 { name: "三内", block: 2 }, 63 { name: "上ノ台", block: 2 }, 64 { name: "三増", block: 101 }, 65 { name: "中津", block: 101 }, 66 { name: "宮ヶ瀬", block: 102 }, 67 { name: "煤ヶ谷", block: 102 }, 68 { name: "中央港1丁目", block: 201 }, 69 { name: "中央港2丁目", block: 201 }, 70 { name: "こてはし台1丁目", block: 202 }, 71 { name: "こてはし台2丁目", block: 202 }, 72 { name: "プラザ", block: 301 }, 73 { name: "三橋5丁目", block: 301 }, 74 { name: "今羽町", block: 302 }, 75 { name: "別所町", block: 302 } 76 ] 77 } 78]; 79 80$(function() { 81 for (var i in data) { 82 for (var j in data[i]["pref"]) { 83 var appendObj = 84 '<option value="" data-value="' + 85 data[i]["pref"][j].area + 86 '">' + 87 data[i]["pref"][j].name + 88 "</option>"; 89 $("#pref-data").append(appendObj); 90 } 91 } 92 93 // 都道府県データを全件表示する関数をセット 94 function prefDataAll(data) { 95 for (var i in data) { 96 for (var j in data[i]["city"]) { 97 var appendObj2 = 98 '<option value="" data-pref="' + 99 data[i]["city"][j].area + 100 '" data-value="' + 101 data[i]["city"][j].block + 102 '">' + 103 data[i]["city"][j].name + 104 "</option>"; 105 $("#city-data").append(appendObj2); 106 } 107 } 108 } 109 110 function prefDataAll(data) { 111 for (var i in data) { 112 for (var j in data[i]["block"]) { 113 var appendObj3 = 114 '<option value="" data-city="' + 115 data[i]["block"][j].block + 116 '">' + 117 data[i]["block"][j].name + 118 "</option>"; 119 $("#block-data").append(appendObj3); 120 } 121 } 122 } 123 124 // 都道府県データをselectに表示 125 prefDataAll(data); 126 127 $("#pref-data").on("change", function() { 128 // 都道府県データをselectから一度全消去 129 $(this) 130 .next("#city-data") 131 .empty(); 132 $(this) 133 .next("#city-data") 134 .prop("disabled", false); 135 136 // 選択したエリアのvalueを変数へ入れる 137 var areaNo = $(this) 138 .find("option:selected") 139 .attr("data-value"); 140 console.log(areaNo); 141 142 if ($(this).val() == "0") { 143 // 選択したエリアのvalueが0なら全表示の関数を呼び出す 144 prefDataAll(data); 145 } else { 146 // 選択したエリアのvalueが0以外ならソート表示の関数を呼び出す 147 prefData(data); 148 } 149 150 // 都道府県データをソート表示する関数をセット 151 function prefData(data) { 152 for (var i in data) { 153 for (var j in data[i]["city"]) { 154 if (data[i]["city"][j].area == areaNo) { 155 var appendObj2 = 156 '<option value="" data-pref="' + 157 data[i]["city"][j].area + 158 '" data-value="' + 159 data[i]["city"][j].block + 160 '">' + 161 data[i]["city"][j].name + 162 "</option>"; 163 $("#city-data").append(appendObj2); 164 } 165 } 166 } 167 } 168 }); 169 170 $("#city-data").on("change", function() { 171 // 都道府県データをselectから一度全消去 172 $(this) 173 .next("#block-data") 174 .empty(); 175 $(this) 176 .next("#block-data") 177 .prop("disabled", false); 178 179 // 選択したエリアのvalueを変数へ入れる 180 var areaNo = $(this) 181 .find("option:selected") 182 .attr("data-value"); 183 console.log(areaNo); 184 185 if ($(this).val() == "0") { 186 // 選択したエリアのvalueが0なら全表示の関数を呼び出す 187 prefDataAll(data); 188 } else { 189 // 選択したエリアのvalueが0以外ならソート表示の関数を呼び出す 190 prefData(data); 191 } 192 193 // 都道府県データをソート表示する関数をセット 194 function prefData(data) { 195 for (var i in data) { 196 for (var j in data[i]["block"]) { 197 if (data[i]["block"][j].block == areaNo) { 198 var appendObj3 = 199 '<option value="" data-city="' + 200 data[i]["block"][j].block + 201 '">' + 202 data[i]["block"][j].name + 203 "</option>"; 204 $("#block-data").append(appendObj3); 205 } 206 } 207 } 208 } 209 }); 210}); 211</script> 212</body> 213</html>

投稿2019/07/13 06:06

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ty-bigwave

2019/07/13 06:36

ありがとうございます。 見直したところ、解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問