前提・実現したいこと
現在、フォームの入力方式で、セレクトボックスによる項目の絞り込みをJSで作ろうとしています。
一つ目のセレクトボックスで県を選択すると、二つ目のセレクトボックスで、該当の市を絞り込んで表示する。
市を選択すると、3つ目のボックスで、さらに詳細な地域を絞り込んで表示するようにしたいのですが、データ量が重く、挙動がブラウザが固まってしまいます。
ブラウザでの処理スピードを上げるためには、どうしたら良いでしょうか?
下記の「希望エリア1」のような動きを理想としています。
https://www.u-spec.com/search_s.php
該当のソースコード
JS
$(function () { $('.data-multi-select').find('select').on('change', function(){ var group = $(this).parents('.data-multi-select'), group_city = group.find('.select-city'), group_block = group.find('.select-block'), select = $(this).attr('data-select'), value = $(this).find('option:selected').attr('data-value'); switch (select) { // 都道府県選択 case 'pref': // disabled解除 group_city.prop('disabled',false); // .select-city // 全て非表示 group_city.find('option').hide(); // .select-city group_block.find('option').hide(); // .select-block for (var i = 0; i < group_city.find('option').length; i++) { var _pref = group_city.find('option').eq(i).attr('data-pref'); if(_pref == value || !_pref){ group_city.find('option').eq(i).show(); } } break; // 市/区選択 case 'city': // disabled解除 group_block.prop('disabled',false); // .select-block // 全て非表示 group_block.find('option').hide(); // .select-block for (var i = 0; i < group_block.find('option').length; i++) { var _city = group_block.find('option').eq(i).attr('data-city'); if(_city == value || !_city){ group_block.find('option').eq(i).show(); } } break; default: break; } }); });
HTML
※膨大すぎるので、アバウトに省略しております
本当はこの10倍以上のデータがあります。
<dd class="c-formBlock__in data-multi-select"> <select name="" id="select01" class="selectbox u-redBg select-valid es-sl04-1 select-pref" data-select="pref"> <option value="0">下記よりお選び下さい</option> <option value="tokyo" data-value="tokyo">東京都</option> <option value="kanagawa" data-value="kanagawa">神奈川県</option> <option value="chiba" data-value="chiba">千葉県</option> <option value="saitama" data-value="saitama">埼玉県</option> </select> <select name="city4" id="select01" class="selectbox u-redBg select-valid es-sl04-2 select-city" data-select="city" disabled > <option value="0" data-pref="">下記よりお選び下さい</option> <!-- 東京都 --> <option value="13207" data-pref="tokyo" data-value="tokyo01" class=>昭島市</option> <option value="13228" data-pref="tokyo" data-value="tokyo02" class=>あきる野市</option> <option value="13121" data-pref="tokyo" data-value="tokyo03" class=>足立区</option> <option value="13118" data-pref="tokyo" data-value="tokyo04" class=>荒川区</option> <!-- 神奈川県 --> <option value="14401" data-pref="kanagawa" data-value="kanagawa01" class=>愛甲郡愛川町</option> <option value="14402" data-pref="kanagawa" data-value="kanagawa02" class=>愛甲郡清川村</option> <option value="14362" data-pref="kanagawa" data-value="kanagawa03" class=>足柄上郡大井町</option> <!-- 千葉県 --> <option value="12102" data-pref="chiba" data-value="chiba01" class=>千葉市中央区</option> <option value="12102" data-pref="chiba" data-value="chiba02" class=>千葉市花見川区</option> <option value="12103" data-pref="chiba" data-value="chiba03" class=>千葉市稲毛区</option> <!-- 埼玉県 --> <option value="11102" data-pref="saitama" data-value="saitama01" class=>さいたま市西区</option> <option value="11102" data-pref="saitama" data-value="saitama02" class=>さいたま市北区</option> </select> <select name="city4" id="select01" class="selectbox u-redBg select-valid es-sl04-2 select-block" data-select="block" disabled > <option value="0" data-city="" class=>お選び下さい</option> <option value="5724" data-city="tokyo01">つつじが丘1丁目</option> <option value="5725" data-city="tokyo01">つつじが丘2丁目</option> <option value="5726" data-city="tokyo01">つつじが丘3丁目</option> <option value="23648" data-city="tokyo01">もくせいの杜1丁目</option> <option value="23649" data-city="tokyo01">もくせいの杜2丁目</option> <option value="23650" data-city="tokyo01">もくせいの杜3丁目</option> <option value="6894" data-city="tokyo02">三内</option> <option value="6881" data-city="tokyo02">上ノ台</option> <option value="6888" data-city="tokyo02">上代継</option> <option value="6895" data-city="tokyo02">下代継</option> <option value="6887" data-city="tokyo02">乙津</option> <option value="6903" data-city="tokyo02">二宮</option> <option value="4598" data-city="tokyo03">一ツ家1丁目</option> <option value="4599" data-city="tokyo03">一ツ家2丁目</option> <option value="4613" data-city="tokyo03">堀之内2丁目</option> <option value="4427" data-city="tokyo03">大谷田1丁目</option> <option value="4428" data-city="tokyo03">大谷田2丁目</option> <!-- 神奈川県 --> <option value="12455" data-city="kanagawa01">三増</option> <option value="12452" data-city="kanagawa01">中津</option> <option value="12453" data-city="kanagawa01">八菅山</option> <option value="12454" data-city="kanagawa01">半原</option> <option value="12444" data-city="kanagawa01">春日台1丁目</option> <option value="12445" data-city="kanagawa01">春日台2丁目</option> <option value="12446" data-city="kanagawa01">春日台3丁目</option> <option value="12447" data-city="kanagawa01">春日台4丁目</option> <option value="12448" data-city="kanagawa01">春日台5丁目</option> <option value="12451" data-city="kanagawa01">棚澤</option> <option value="12450" data-city="kanagawa01">田代</option> <option value="12449" data-city="kanagawa01">角田</option> <option value="12458" data-city="kanagawa02">宮ヶ瀬</option> <option value="12456" data-city="kanagawa02">煤ヶ谷</option> <option value="12457" data-city="kanagawa02">煤ヶ谷丹沢山札掛</option> <option value="12371" data-city="kanagawa03">上大井</option> <option value="12376" data-city="kanagawa03">山田</option> <option value="12375" data-city="kanagawa03">柳</option> <option value="12372" data-city="kanagawa03">篠窪</option> <option value="12374" data-city="kanagawa03">西大井</option> <option value="12368" data-city="kanagawa03">赤田</option> <option value="12370" data-city="kanagawa03">金子</option> <option value="12369" data-city="kanagawa03">金手</option> <option value="12373" data-city="kanagawa03">高尾</option> <option value="14441" data-city="chiba01">中央港1丁目</option> <option value="14442" data-city="chiba01">中央港2丁目</option> <option value="14437" data-city="chiba01">中央1丁目</option> <option value="14438" data-city="chiba01">中央2丁目</option> <option value="14439" data-city="chiba01">中央3丁目</option> <option value="14500" data-city="chiba02">こてはし台1丁目</option> <option value="14501" data-city="chiba02">こてはし台2丁目</option> <option value="14502" data-city="chiba02">こてはし台3丁目</option> <option value="14579" data-city="chiba03">あやめ台</option> <option value="14614" data-city="chiba03">作草部町</option> <option value="14612" data-city="chiba03">作草部1丁目</option> <!-- 埼玉県 --> <option value="12484" data-city="saitama01">プラザ</option> <option value="12486" data-city="saitama01">三橋5丁目</option> <option value="12487" data-city="saitama01">三橋6丁目</option> <option value="12532" data-city="saitama02">今羽町</option> <option value="12553" data-city="saitama02">別所町</option> <option value="12522" data-city="saitama02">吉野町1丁目</option> <option value="12523" data-city="saitama02">吉野町2丁目</option> <option value="12544" data-city="saitama02">土呂町</option> </select> </dd>
試したこと
html()に一度optionのデータを格納して、取り出す方式をとろうとしましたが、うまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
クロームで確認しました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/12 21:40
2019/07/12 22:59
2019/07/13 01:56
2019/07/13 02:00
2019/07/13 02:22
2019/07/13 02:31
2019/07/13 02:41
2019/07/13 02:44
2019/07/13 05:32 編集
2019/07/13 08:17
2019/07/13 09:19
2019/07/13 09:24