Dropdown in HTML is empty at initialization due to Javascript

Question

I've created in an html webpage a dropdown with four options. It worked well but I realized that when the page was refreshed, the value would reset itself to the first option. Since I wanted the user's choice to be kept in memory, I added a javascript code snippet that I found somewhere.

It works very well, except that at the initialization the default value of the dropdown is an empty field.

I would need the first option to be displayed at initialization.

I guess it's easy but I don't know JavaScript at all. Could you please help?

Here is what the code looks like:

<select name="options" id='dropdown'>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
  <option value="4">4th Option</option>
 </select>


 <!-- The script below helps to keep in memory the dropdown value after the page has been refreshed -->

  <script type="text/javascript">

    var selectedItem = sessionStorage.getItem("SelectedItem");  
    $('#dropdown').val(selectedItem);

    $('#dropdown').change(function() { 
    var dropVal = $(this).val();
    sessionStorage.setItem("SelectedItem", dropVal);
    });
 </script>

score 0 · Accepted Answer · answered Feb 03 '20 at 11:51

I think you should check if SessionStorage Key exists or not.

I have created working example of your code : https://jsfiddle.net/vieckys/Lwv1n8p7/7/

Here is HTML Markup:

<select name="options" id='dropdown'>
  <option value="0" selected>--- select here ---</option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
  <option value="4">4th Option</option>
</select>

and JS Code

 let selectedItem = sessionStorage.getItem("SelectedItem");

 if (selectedItem) {
    $('#dropdown').val(selectedItem);
 } else {
   $('#dropdown').val(0);
 }

 $('#dropdown').change(function() { 
    let dropVal = $(this).val();
    sessionStorage.setItem("SelectedItem", dropVal);
 });

Let me know if you face any issue with this.

I've applied a few changes, then tried it and it seems to work as I wanted. Thank you very much! — curiousIT, Feb 03 '20 at 12:52
Just did it but since my reputation is less than 15 points it said that it will be recorded but won't be reflected in the public score. Anyway, thanks for your help, much appreciated! — curiousIT, Feb 03 '20 at 22:53

score -1 · Answer 2 · answered Feb 03 '20 at 11:43

Based on your scenario, you can explicitly trigger the change event after the value is set for the dropdown using trigger('change') on the select dropdown. This will run the change function and will save the initial value in the sessionStorage. So, add this line of code, $('#dropdown').trigger('change') something like:

<script type = "text/javascript" >

var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);

$('#dropdown').change(function() {
  var dropVal = $(this).val();
  sessionStorage.setItem("SelectedItem", dropVal);
});
$('#dropdown').trigger('change'); // trigger the change explicitly
</script>

Dropdown in HTML is empty at initialization due to Javascript

2 Answers2