【タブメニュー】複数のタブメニューとセレクトボックスの選択を連動

レスポンシブのタブメニューで、複数のタブメニューの選択とセレクトボックスの選択を連動させます。PC表示で選択しているタブの順番と、SP表示で選択しているセレクトボックスのオプションの順番が全て同じになります。

html、CSSのコードは下記の記事と同様になります。

【タブメニュー】SP表示でセレクトボックスに切り替え

レスポンシブのタブメニューでSP表示の場合はセレクトボックスにします。タブメニュー、セレクトボックス、どちらも同一のコンテンツを表示します。

tech.brick-plan.jp

2021.02.11

jQueryのコードです。
タブクリック時に同一カスタムデータ属性のulタグのタブを連動して選択、セレクトボックス選択時に同一カスタムデータ属性のセレクトボックスのoptionタグを連動して選択する処理にしています。ただしセレクトボックスのoptionタグ選択は、notメソッドを利用して.not(this)で操作したセレクトボックスは除外しています。

$(function() {
	$('.tab_menu li').on('click tap', function() {
		var tabmenu = $(this).parents('.tab_menu');
		var datatab = $(tabmenu).data('tab');
		var tabpanel = $('#' + datatab);
		var index = $(this).index();

		//同一カスタムデータ属性のul連動（操作したタブを含む）
		$('ul[data-tab='+ datatab +']').each(function() {
			$(this).children().removeClass('selected');
			$(this).children().eq(index).addClass('selected');
		});

		//select連動
		$('select[data-tab='+ datatab +']').each(function() {
			$(this).prop('selectedIndex', index);
		});

		tabpanel.children().removeClass('is-show');
		tabpanel.children().eq(index).addClass('is-show');
	});

	$('.select_menu').on('change', function() {
		var datatab = $(this).data('tab');
		var tabpanel = $('#' + datatab);
		var index = $(this).prop('selectedIndex');

		//同一カスタムデータ属性のselect連動（操作したセレクトボックスは除外）
		$('select[data-tab='+ datatab +']').not(this).each(function() {
			$(this).prop('selectedIndex', index);
		});

		//ul連動
		$('ul[data-tab='+ datatab +']').each(function() {
			$(this).children().removeClass('selected');
			$(this).children().eq(index).addClass('selected');
		});

		tabpanel.children().removeClass('is-show');
		tabpanel.children().eq(index).addClass('is-show');
	});
});