选择后如何保留下拉值

Question

下面的代码设置为在页面上选择 2 个下拉值，这可以正常工作，但是，由于即使选择了第一个下拉值，页面也会刷新，因此不保留 dropdpwn 值。

如何保留下拉值？

$(document).ready(function() {
  $('.boxy').hide();
  var drop1Value = '';
  var drop2Value = '';
  var cntyS = getUrlVars()['cntry'];
  var piS = getUrlVars()['PI'];
  $("#drop1").on("change", function() {
    var drop1Value = $('#drop1').val();

    if (drop1Value == "") {
      $('#content').hide();
    } else {
      drop1Value = $('#drop1').val();
    }

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + drop1Value + '&PI=' + piS;
    window.location.href = bURL;
  });

  $("#drop2").on("change", function() {
    var drop2Value = $('#drop2').val();

    if (drop2Value == "") {
      $('#content').hide();
    } else {
      drop2Value = $('#drop2').val();
    }

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + cntyS + '&PI=' + drop2Value;
    window.location.href = bURL;
  });
});

function getUrlVars() {
  var vars = [],
    hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

Answer 1

jQuery 支持方法链。您可以利用它来设置这样的值：

$('myselector').on('...', function () {}).val(myValue)

在你的情况下，这是正确的代码：

$(document).ready(function() {
  $('.boxy').hide();
  var drop1Value = '';
  var drop2Value = '';
  var cntyS = getUrlVars()['cntry'];
  var piS = getUrlVars()['PI'];
  $("#drop1").on("change", function() {
    var drop1Value = $('#drop1').val();

    if (drop1Value == "") {
      $('#content').hide();
    } else {
      drop1Value = $('#drop1').val();
    }

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + drop1Value + '&PI=' + piS;
    window.location.href = bURL;
  }).children('[value="'+cntyS+'"]').prop('selected', true);

  $("#drop2").on("change", function() {
    var drop2Value = $('#drop2').val();

    if (drop2Value == "") {
      $('#content').hide();
    } else {
      drop2Value = $('#drop2').val();
    }

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + cntyS + '&PI=' + drop2Value;
    window.location.href = bURL;
  }).children('[value="'+piS+'"]').prop('selected', true);
});

function getUrlVars() {
  var vars = [],
    hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}