Question

我想在用户更改下拉列表值时更改网址。我正在使用pushstate来实现该功能这是我的代码

当用户选择第一个下拉列表（选择银行）时，.url已更改为

domain +business/india/ifsc-codes/bank-<option>.cms

当用户第二次下拉（选择状态）url更改为

时

domain +business/india/ifsc-codes/bank-<option>,state-<option>.cms

同样在分支......

这是我的代码

<!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>

如何更改URL而无需在jquery中重新加载（更改下拉列表后）？

0 个答案: