Possible Duplicate:
Html select option lost data after submit
I have a select menu that should keep the selected option after the page refresh. This is the example:
<select id="form_frame" name="frame" onchange="getData(this);"/>
<option value="data1" selected="selected">Data 1</option>
<option value="data2">Data 2</option>
</select>
Function getData just pull info to the user.
I'm using Smarty/php for the dynamic content.
Open to advice, thanks!
How it's done with local storage :
$(function() {
if (localStorage.getItem('form_frame')) {
$("#form_frame option").eq(localStorage.getItem('form_frame')).prop('selected', true);
}
$("#form_frame").on('change', function() {
localStorage.setItem('form_frame', $('option:selected', this).index());
});
});
Put the id or value of the selected option element in your php session( $_SESSION['selected_option_id']), In this way this value is passed through all the pages. And then change on the code that generates the option elements check agains $_SESSION['selected_option_id'] and if it matches one then set the selected attribute in the option element.
Sessions is a good way to share values between requests since HTTP is a stateless protocol.
I prefer session before localStorage and cookies because those ones may not be available or enabled in the clients browser. The session is a feature of apache/php and are supported on the servers side.
You can use Cookies. However, if you want it to work it for users that won't accept cookies from your site, append the url with a hash-tag. Onchange of the select field you update the hash-tag. Onload of the page, you check for a present hash-tag and set the select to the option whose value matches the one of the hash-tag.