By clicking submit, the first drop down retains its values, but the second drop down returns to showing all options

Viewed 22

Is is possible to save the selected options from drop down 1 to drop down 2 and keep them selected after submission.

The first drop down allows you to select the items you wish to have selected, and the second drop down is populated with the first drop down's selections.

By clicking submit, the first drop down retains its values, but the second drop down returns to showing all options.

I need the second drop down to also hold its values after submit, would this be possible? Below is my code.

<select style="width: 100%;" data-icon-base="fas" data-tick-icon="fa-check" id="id1" name="name1[]" class="selectpicker" title="Select Currencies" multiple="multiple">
           <option value="EUR">EUR - Euro</option>
           <option value="USD">USD - United States Dollar</option>
           <option value="AUD">AUD - Australian Dollar</option>
           <option value="GBP">GBP - Great Brittish Pound</option>
           <option value="NZD">NZD - New Zealand Dollar</option>
           <option value="CAD">CAD - Canadian Dollar</option>
           <option value="CHF">CHF - Swiss Frank</option>
           <option value="HUF">HUF - Hungarian Forint</option>
           <option value="HKD">HKD - Hong Kong Dollar</option>
           <option value="SGD">SGD - Singapore Dollar</option>
           <option value="AED">AED - United Arab Emirates</option>
           <option value="CNY">CNY - Chinese Yuan</option>
           <option value="CZK">CZK - Czech Koruna</option>
           <option value="EGP">EGP - Egyptian Pound</option>
           <option value="INR">INR - Indian Rupee</option>
           <option value="LBP">LBP - Lebanese Pound</option>
           <option value="MXN">MXN - Mexican Peso</option>
           <option value="NAD">NAD - Namibian Dollar</option>
           <option value="PLN">PLN - Poland Zloty</option>
           <option value="RON">RON - Romanian Leu</option>
           <option value="RUB">RUB - Russian Ruble</option>
           <option value="SEK">SEK - Swedish Krona</option>
           <option value="THB">THB - Thai Baht</option>
           <option value="TRY">TRY - Turkish Lira</option>
           <option value="UAH">UAH - Ukrainian Hryvnia</option>
           <option value="JPY">JPY - Japanese Yen</option>
           <option value="ZAR">ZAR - South African Rand</option>
</select>

<select id="id2" name="cur_name" class="selectpicker" title="Select Base">
           <option value="EUR">EUR - Euro</option>
           <option value="USD">USD - United States Dollar</option>
           <option value="AUD">AUD - Australian Dollar</option>
           <option value="GBP">GBP - Great Brittish Pound</option>
           <option value="NZD">NZD - New Zealand Dollar</option>
           <option value="CAD">CAD - Canadian Dollar</option>
           <option value="CHF">CHF - Swiss Frank</option>
           <option value="HUF">HUF - Hungarian Forint</option>
           <option value="HKD">HKD - Hong Kong Dollar</option>
           <option value="SGD">SGD - Singapore Dollar</option>
           <option value="AED">AED - United Arab Emirates</option>
           <option value="CNY">CNY - Chinese Yuan</option>
           <option value="CZK">CZK - Czech Koruna</option>
           <option value="EGP">EGP - Egyptian Pound</option>
           <option value="INR">INR - Indian Rupee</option>
           <option value="LBP">LBP - Lebanese Pound</option>
           <option value="MXN">MXN - Mexican Peso</option>
           <option value="NAD">NAD - Namibian Dollar</option>
           <option value="PLN">PLN - Poland Zloty</option>
           <option value="RON">RON - Romanian Leu</option>
           <option value="RUB">RUB - Russian Ruble</option>
           <option value="SEK">SEK - Swedish Krona</option>
           <option value="THB">THB - Thai Baht</option>
           <option value="TRY">TRY - Turkish Lira</option>
           <option value="UAH">UAH - Ukrainian Hryvnia</option>
           <option value="JPY">JPY - Japanese Yen</option>
           <option value="ZAR">ZAR - South African Rand</option>
</select>

Script to get values from drop down 1 and populate drop down 2

<script>

document.addEventListener("change", function(){

$('#id1').on('change', function() {

var values = $(this).val()
$("#id2 option").hide() //hide all options
$('#id2').selectpicker('deselectAll') //if want to remove all selcted optn

if (values.length > 0) {
  for (var i = 0; i < values.length; i++) {

  //show where value is same..
  $("#id2 option[value=" + values[i] + "]").show()
  }
} else {
$("#id2 option[value=" + values[i] + "]").show() 
}
$('#id2').selectpicker('refresh'); //refresh selctpicker

    });
});

</script>

Script to store the values of the dropdown

<script>

if(localStorage['multiple']){        
  $.each(localStorage['multiple'].split(","), function(i,e){
      $("#id1 option[value='" + e + "']").prop("selected", true);
  });
}

$('form').submit(function(event) {
   localStorage['multiple'] = $('select').val();
})

</script>
0 Answers
Related