How to switch tabs with selecting options by alpine.js - tabs

Question

How to switch tabs by option with select in small size screens? I have this code and it works well, but not with select - option.
<div x-data="{
openTab: 1,
activeClasses: 'bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5',
inactiveClasses: 'bg-transparent absolute inset-x-0 bottom-0 h-0.5',
}" class="">
<div class="hidden">
<label for="tabs" class="sr-only">Choose category</label>
<select id="tabs" name="tabs"
class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-sm">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="max-w-6xl mx-auto">
<nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">
<a #click="openTab = 1" :class="{ '-mb-px': openTab === 1 }" href="#" aria-current="page"
class="text-gray-900 rounded-tl group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 1</span>
<span aria-hidden="true"
:class="openTab === 1 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
<a #click="openTab = 2" :class="{ '-mb-px': openTab === 2 }" href="#" aria-current="false"
class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 2</span>
<span aria-hidden="true"
:class="openTab === 2 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
<a #click="openTab = 3" :class="{ '-mb-px': openTab === 3 }" href="#" aria-current="false"
class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 3</span>
<span aria-hidden="true"
:class="openTab === 3 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
<a #click="openTab = 4" :class="{ '-mb-px': openTab === 4 }" href="#" aria-current="false"
class="text-gray-500 hover:text-gray-700 rounded-tr group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 4</span>
<span aria-hidden="true"
:class="openTab === 4 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
</nav>
</div>
<div
class="max-w-6xl rounded-bl rounded-br h-auto mx-auto md:flex w-full bg-white bg-opacity-50 p-5 items-center">
<div x-show="openTab === 1" class="md:flex-1 mx-auto">Tab #1</div>
<div x-show="openTab === 2" class="md:flex-1">Tab #2</div>
<div x-show="openTab === 3" class="md:flex-1">Tab #3</div>
<div x-show="openTab === 4" class="md:flex-1">Tab #4</div>
</div>
</div>

Answer 1

The select box input is not used in your implementation to trigger the change on openTab property, We can bind the value of the select box to openTab variable using x-model attribute. Now openTab variable will be set to 1 to 4 depending on the options selected.
<div x-data="{
openTab: 1,
activeClasses: 'bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5',
inactiveClasses: 'bg-transparent absolute inset-x-0 bottom-0 h-0.5',
}" class="">
<div class="hidden">
<label for="tabs" class="sr-only">Choose category</label>
<select id="tabs" name="tabs" x-model="openTab"
class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-sm">
<option value="1" >Value 1</option>
<option value="2" >Value 2</option>
<option value="3" >Value 3</option>
<option value="4" >Value 4</option>
</select>
</div>
<div class="max-w-6xl mx-auto">
<nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">
<a #click="openTab = 1" :class="{ '-mb-px': openTab == 1 }" href="#" aria-current="page"
class="text-gray-900 rounded-tl group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 1</span>
<span aria-hidden="true"
:class="openTab == 1 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
<a #click="openTab = 2" :class="{ '-mb-px': openTab == 2 }" href="#" aria-current="false"
class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 2</span>
<span aria-hidden="true"
:class="openTab == 2 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
<a #click="openTab = 3" :class="{ '-mb-px': openTab == 3 }" href="#" aria-current="false"
class="text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 3</span>
<span aria-hidden="true"
:class="openTab == 3 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
<a #click="openTab = 4" :class="{ '-mb-px': openTab == 4 }" href="#" aria-current="false"
class="text-gray-500 hover:text-gray-700 rounded-tr group relative min-w-0 flex-1 overflow-hidden bg-white p-3 text-lg font-medium text-center hover:bg-gray-50 focus:z-10">
<span>Value 4</span>
<span aria-hidden="true"
:class="openTab == 4 ? 'bg-charcoal-900 absolute inset-x-0 bottom-0 h-0.5':'bg-transparent absolute inset-x-0 bottom-0 h-0.5'"></span>
</a>
</nav>
</div>
<div class="max-w-6xl rounded-bl rounded-br h-auto mx-auto md:flex w-full bg-white bg-opacity-50 p-5 items-center">
<div x-show="openTab == 1" class="md:flex-1 mx-auto">Tab #1</div>
<div x-show="openTab == 2" class="md:flex-1">Tab #2</div>
<div x-show="openTab == 3" class="md:flex-1">Tab #3</div>
<div x-show="openTab == 4" class="md:flex-1">Tab #4</div>
</div>
</div>
Note that I have changed the comparison from === to == to avoid strict type checking (since select input value is a string)