I want to change url when user change dropdown value.I am using pushstate to achieve the functionality here is my code
https://jsbin.com/kicijogawi/2/edit
When user select first dropdown (select bank).url changed to
domain +business/india/ifsc-codes/bank-<option>.cms
when user second dropdown (select state) url changed to
domain +business/india/ifsc-codes/bank-<option>,state-<option>.cms
same in branch...
here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<form>
<span><select data-bank-list="banksname">
<option value="0" disabled="true" selected="true">Select Bank</option>
<option value="a">A</option>
<option value="b">B</option>
</select></span>
<span><select data-state-list="statename">
<option value="0" disabled="true" selected="true">Select State</option>
<option value="c">C</option>
<option value="d">D</option>
</select></span>
<span><select data-district-list="districtname">
<option value="0" disabled="true" selected="true">Select District</option>
<option value="e">E</option>
<option value="f">F</option>
</select></span>
<button class="ifsc_getbankbtn" data-bankdetail="btnbankdetail" disabled="true">Get Bank Details</button>
</form>
<script>
function changeUrlUsingPushState(bankName, stateName, districtName, branchName) {
var str = "business/india/ifsc-codes/";
str += bankName ? 'bank-' + bankName : str;
str += stateName ? ',state-' + stateName : str;
str += districtName ? ',district-' + districtName : str;
str += branchName ? ',branch-' + branchName : str;
str +='.cms';
return str;
}
$(function(){
$('select').on('change', function() {
console.log('t',this.value)
history.pushState(null, null, changeUrlUsingPushState(this.value));
})
})
</script>
</body>
</html>
