セレクトボックスの絞り込みの挙動が遅くなってしまうので、処理を早くしたい。

Question

前提・実現したいこと

現在、フォームの入力方式で、セレクトボックスによる項目の絞り込みをJSで作ろうとしています。
一つ目のセレクトボックスで県を選択すると、二つ目のセレクトボックスで、該当の市を絞り込んで表示する。
市を選択すると、3つ目のボックスで、さらに詳細な地域を絞り込んで表示するようにしたいのですが、データ量が重く、挙動がブラウザが固まってしまいます。
ブラウザでの処理スピードを上げるためには、どうしたら良いでしょうか？

下記の「希望エリア１」のような動きを理想としています。
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">つつじが丘１丁目</option>
          <option value="5725" data-city="tokyo01">つつじが丘２丁目</option>
          <option value="5726" data-city="tokyo01">つつじが丘３丁目</option>
          <option value="23648" data-city="tokyo01">もくせいの杜１丁目</option>
          <option value="23649" data-city="tokyo01">もくせいの杜２丁目</option>
          <option value="23650" data-city="tokyo01">もくせいの杜３丁目</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">一ツ家１丁目</option>
          <option value="4599" data-city="tokyo03">一ツ家２丁目</option>
          <option value="4613" data-city="tokyo03">堀之内２丁目</option>
          <option value="4427" data-city="tokyo03">大谷田１丁目</option>
          <option value="4428" data-city="tokyo03">大谷田２丁目</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">春日台１丁目</option>
          <option value="12445" data-city="kanagawa01">春日台２丁目</option>
          <option value="12446" data-city="kanagawa01">春日台３丁目</option>
          <option value="12447" data-city="kanagawa01">春日台４丁目</option>
          <option value="12448" data-city="kanagawa01">春日台５丁目</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">中央港１丁目</option>
          <option value="14442" data-city="chiba01">中央港２丁目</option>
          <option value="14437" data-city="chiba01">中央１丁目</option>
          <option value="14438" data-city="chiba01">中央２丁目</option>
          <option value="14439" data-city="chiba01">中央３丁目</option>


          <option value="14500" data-city="chiba02">こてはし台１丁目</option>
          <option value="14501" data-city="chiba02">こてはし台２丁目</option>
          <option value="14502" data-city="chiba02">こてはし台３丁目</option>

          <option value="14579" data-city="chiba03">あやめ台</option>
          <option value="14614" data-city="chiba03">作草部町</option>
          <option value="14612" data-city="chiba03">作草部１丁目</option>


          <!-- 埼玉県 -->
          <option value="12484" data-city="saitama01">プラザ</option>
          <option value="12486" data-city="saitama01">三橋５丁目</option>
          <option value="12487" data-city="saitama01">三橋６丁目</option>


          <option value="12532" data-city="saitama02">今羽町</option>
          <option value="12553" data-city="saitama02">別所町</option>
          <option value="12522" data-city="saitama02">吉野町１丁目</option>
          <option value="12523" data-city="saitama02">吉野町２丁目</option>
          <option value="12544" data-city="saitama02">土呂町</option>

          </select>
</dd>

試したこと

html()に一度optionのデータを格納して、取り出す方式をとろうとしましたが、うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

クロームで確認しました。

Answer 1

htmlの描画はもともと負荷が高い処理となります。
データを外に持ち(データベース)、Ajax非同期通信によりPHPなどのサーバーサイドの言語から必要なデータだけを絞りこんで取得し、html描画も必要なものだけにするしかないと思います。

(住所データ自体は郵政省から得られたはず。APIも探してみると良いです。郵便番号APIはあります)

Comments

[ty-bigwave]

早速のご回答、ありがとうございます。
早速確認いたします。

[m.ts10806]

「確認します」だけでは解決とは言えないのでは？

[ty-bigwave]

申し訳ございません。
操作を誤ってしまいました。
住所APIを探してみたのち、新たに質問を投稿いたします。
ご指摘いただき、ありがとうございます。

[m.ts10806]

一度ベストアンサーを外しておいてもらえると。
「解決済み」にしてしまうと他の回答者の目にはつきにくくなりますし、それで別のアドバイスをうける機会がなくなるのも勿体無いので

[ty-bigwave]

質問の削除、ベストアンサーの解除ができないようですので、ご提示頂いたアドバイスで新しい案を検討し、再度別の質問をいたします。
ありがとうございます。
自らチャンスを失わないよう、注意して質問、返信いたします。

[m.ts10806]

質問の削除はする必要がないとは思いますが、回答がつくと直接削除依頼はできませんし、解決済みになると削除不可となります。
ベストアンサーの解除は何度かしてもらったことがあるので何かしら手段があると思います(私は質問したことがないので画面がどうなっているのかわかりませんが、高評価や低評価の解除などと同じくクリックでできるのではないかと思っています)

[ty-bigwave]

ベストアンサーを解除することができました。
ありがとうございます。

[m.ts10806]

確認しました。では続きをお待ちしております

[ty-bigwave]

ありがとうございます。

セレクトボックスの選択項目の中に、固有の値が大量にあったので、配列に入れてから、それを出し分けるようにいたしました。

それにあたり、別途質問をしようと思います。

今後、住所のデータを取得するにあたり、このような方法があるのだと参考になりました。

今回はうまく使いこなせませんでしたが、次回、参考にさせていただければと思います。

[m.ts10806]

なるほど次に移られたのであればこちらは締めたほうがよさそうですね

[ty-bigwave]

本当にありがとうございました。
気をつけて質問いたします。

[m.ts10806]

進んだようで何よりです