How to retain the dropdown values after selection

Question

The below code is set to select 2 dropdown values on the page, which works fine, however, since the page refreshed even when 1st dropdown is selected, the dropdpwn values are not retained.

How do i retain the dropdown values ?

$(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;
}

Similar topic: http://stackoverflow.com/questions/15139788/with-javascript-keep-selected-value-in-dropdown-list — JGV, Jul 30 '15 at 07:35

Amit · Answer 1 · 2015-07-30T10:06:58.017

jQuery supports method chaining. You can utilize that to set the value like this:

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

In your case, this is the correct code:

$(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;
}

another question.. The webpage brings "Pricing Inventory: IN - AC" when India & AC is selected in drop1 & drop2.. I want IN to show as India... is that possible.. ' — Ramesh, Jul 30 '15 at 08:57

How to retain the dropdown values after selection

1 Answers1