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.
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();
}
})
})
