انتقال به صفحات مختلف با تگ select و option در HTML

برای اینکه بتوانیم کاربر را از طریق آیتم‌های تگ select و option در HTML به بخش‌ها یا صفحات مختلف هدایت کنیم، کافی است کمی از جاوا اسکریپت برای این کار بهره ببریم.

در زیر یک نمونه‌ی ساده را نمایش داده‌ام که کاربر با انتخاب هر option به صفحه‌ی تعیین شده‌ی ما هدایت می‌شود.

<div>
	<select onchange="requestHandler(this.value)">
		<option value="page1" <?php if(last(request()->segments()) == 'page1'){echo 'selected';} ?>>صفحه اول</option>
		<option value="page2" <?php if(last(request()->segments()) == 'page2'){echo 'selected';} ?>>صفحه دوم</option>
		<option value="page3" <?php if(last(request()->segments()) == 'page3'){echo 'selected';} ?>>صفحه سوم</option>
	</select>
</div>
<script>
	function requestHandler(value) {
		window.location.assign(`${value}`);
	}
</script>

نکته: من فرض را بر این گرفته‌ام که در حال استفاده از لاراول می‌باشیم و می‌خواهیم option جاری در وضعیت selected باشد. کافی است سگمنت انتهایی URL را تشخیص دهیم که در زیر و کد بالا این کار صورت گرفته است. در غیر این صورت، نوشتن این کد ضروری نیست و نیازی به آن نخواهید داشت و می‌توانید روش‌های دلخواه خودتان را به کار ببرید.

<?php if(last(request()->segments()) == 'page3'){echo 'selected';} ?>