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

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

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

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

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

tech.brick-plan.jp

2021.02.11

jQueryのコードです。
タブクリック時にセレクトボックスの該当の順番のoptionタグを選択、セレクトボックス選択時に該当の順番のタブを選択する処理を追加しています。セレクトボックスの該当の順番のoptionタグを選択状態にする処理は、propメソッドの第一引数に’selectedIndex’、第二引数に該当の順番を指定します。

$$(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();

		tabmenu.children().removeClass('selected');
		$(this).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');

		//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');
	});
});