Redirect page according to dependent dropdown menu in Javascript

In our previous tutorial, we have seen Engineer's unit converter using Javascript, In this tutorial, we are going to create Redirect page functionality according to the dependent dropdown menu option.

Redirect page according to dependent dropdown menu in Javascript

In this tutorial, we are creating dependent dropdown menu options and redirecting the page to a particular link. We will create this system using the javascript object and for in loop.

in short, the JavaScript for in loops through the properties or keys of an Object.

You can also create a country-state-dependent dropdown by following this tutorial.

First, we are going to create a form with two dropdowns using bootstrap, copy, and past below-provided code into your HTML page

        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
<!-- jquery cdn -->
https://code.jquery.com/jquery-3.6.0.min.js

<div class="container pt-5">
 <div class="row  d-flex justify-content-center">
	 <div class="col-md-5 p-4 border">

	 <h2>Redirect page  dependent dropdown</h2>

		<form name="myform" id="myForm">
			<select class="form-select" id="category_sel" size="1">
				<option value="" selected="selected">-- Select category --</option>
			</select>
			<br>
			<br>

			<select class="form-select" id="topic_sel" size="1">
				<option value="" selected="selected">-- Select Blog --</option>
			</select>
			<br>
			<br>

			<button type="button" id="filter_s" class="btn btn-primary">Search</button>

		</form>
	 </div>
 </div>

</div>
Now we have to create a javascript object and call it using javascript for in loop
        
        var countryStateInfo = {
	"php": {
		"Login and Registration": ["https://bootstrapfriendly.com/blog/login-and-registration-system-in-php-and-mysql-with-oops-concept/"],
		"API CRUD Operation": ["https://bootstrapfriendly.com/blog/crud-operations-with-php-curl-rest-api/"],
		"Table Row Sorting": ["https://bootstrapfriendly.com/blog/table-row-sorting-with-drag-and-drop-functionality-using-ajax-php-and-mysqli-/"]
		},
	"php mysql": {
		"CRUD Operations": ["https://bootstrapfriendly.com/blog/mysqli-procedural-basic-crud-operation/"],
		"Signature Pad": ["https://bootstrapfriendly.com/blog/form-with-signature-pad-e-signature-pad-using-jquery-ui-and-php/"]
	},
	"Jquery": {
		"Dynamic From field": ["https://bootstrapfriendly.com/blog/dynamically-add-or-remove-form-input-fields-using-jquery/"],
		"Datatable": ["https://bootstrapfriendly.com/blog/implementation-of-column-specific-search-fixed-column-and-scrolling-behavior-of-table-using-datatable-and-bootstrap/"]
	},
	"Design snippet": {
		"Bootstrap 4": ["https://bootstrapfriendly.com/blog/service-displaying-with-icon-and-danger-hover-effect-on-div-hover/"],
		"Bootstrap 5": ["https://bootstrapfriendly.com/blog/creating-tabs-design-with-bootstrap-5/"]
	}
}



window.onload = function () {
	//Get html elements
	var category_sel = document.getElementById("category_sel");
	var topic_sel = document.getElementById("topic_sel");
	//Load countries
	for (var country in countryStateInfo) {
		category_sel.options[category_sel.options.length] = new Option(country, country);
	}
	//County Changed
	category_sel.onchange = function () {
		 topic_sel.length = 1; // remove all options bar first
		 if (this.selectedIndex < 1)
			 return; // done

		 for (var state in countryStateInfo[this.value]) {
			 topic_sel.options[topic_sel.options.length] = new Option(state, countryStateInfo[this.value][state]);
		 }
	}
}


$(document).ready(function(){
    $("#filter_s").click(function () {
        if($("#topic_sel option:selected").val() !== ""){
            window.location.href = $("#topic_sel").val();
        }
    })
})
Download Code Live Preview

Leave a comment

Feature Posts