経緯とメモ

2022/02/05 : メモ JavaScript jQuery

前提

各地域に複数店舗あるリストから選んでもらうため、
地域を選択したら、店舗選択のプルダウンでは該当地域の店舗のみを表示したい

HTML

<select name="SELECT_AREA"  onchange="selectArea(this)">
	<opition value="初めて利用"></opition>
	<opition value="関東"></opition>
	<opition value="中部"></opition>
	<opition value="九州"></opition>
</select>
<select name="SELECT_SHOP">
	<opition value="▼選択してください" selected></opition>
	<opition value="池袋店"></opition>
	<opition value="原宿店"></opition>
	<opition value="広島店"></opition>
	<opition value="長崎店"></opition>
	<opition value="熊本店"></opition>
	<opition value="沖縄店"></opition>
</select>

考え方

• 配列を用意しておく

var shop_data = [
   {area: '関東', shop:'池袋店'},
   {area: '関東', shop:'原宿店'},
   {area: '中部', shop:'広島店'},
   {area: '九州・沖縄', shop:'長崎店'},
   {area: '九州・沖縄', shop:'熊本店'},
   {area: '九州・沖縄', shop:'沖縄店'}
]

• name="SELECT_AREA"のselectを選択したら発火
  • 「初めて利用」を選択した際はすべての店舗を表示
  • いずれかの地域を選択した場合、name="SELECT_SHOP"のselectは該当地域の店舗のみを表示
• 途中で1つ目の地域を変更することも考慮する

function selectArea(area_name){
    // 選択された地域をarea_nameに代入
    area_name=area_name.value
    if(area_name == ""||area_name == "初めて利用"){
        // 未選択or初めて利用を選択したらすべての店舗を表示
        $('select[name="SELECT_AREA"] option:not(:first-child)').show();
    }else{
        // 地域を選択したらすべて非表示
        $('select[name="SELECT_AREA"] option:not(:first-child)').hide();		
        // 配列のarea名と同じものを表示させる
        var selected_area_shops = shop_data.filter(shop_name => shop_name.area == area_name)
        // 配列を順に処理
        $.each(selected_area_shops,
        function(index, val) {
            $('select[name="SELECT_AREA"] option[value="'+val.shop +'"]').show();
                }
            );
    }
}
// name="SELECT_AREA"のselectが変化したら発火
document.getelementsbyname("SELECT_AREA").onchange = selectArea();