How to modify the default value of a select dropdown without using inline javascript?

Question

In a Chrome extension, Google does not allow us to add inline javascript to popup.html. Thus, the only option is to link to an external script.

I have the following:

script.js:

if (localStorage.getItem("mySelectValue") === null) { 
    document.write("choose a value"); 
}
else {
    document.write(localStorage.getItem('mySelectValue'));
}

popup.js:

$(document).ready(function(){
    $('#mySelectValue').change(function(){
         localStorage.setItem('mySelectValue', $(this).val());
         $('#mySelectValue').value(localStorage.getItem('mySelectValue'));
    });
});

popup.html:

<script type="text/javascript" src="popup.js"></script>

<select id="mySelectValue">
   <option name="" value=""><script type="text/javascript" src="script.js"></script></option>
       <option value="first" name="first">first</option>
       <option value="second" name="second">second</option>
       <option value="third" name="third">third</option>
</select>

This code successfully displays the text but I can't add in a script to the value in this manner. So how can I do the same method to define the given value in local storage also as the value?

Answer 1

In jQuery, you can do the following:

$("#mySelectValue option[value='"+localStorage.getItem('mySelectValue')+"']").attr("selected","selected");

This basically finds the option with the same value you get from localStorage.getItem('mySelectValue') and makes it selected by default.