Keep selected option (form/select) after refresh

15,986

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

FIDDLE

Share:
15,986
Diego Sarmiento
Author by

Diego Sarmiento

Skilled professional with more than +10 years of experience in the finance, health care and hospitality industry. Highly developed skills on Software Architecture (Angular) to support high-performance and scalable products. Focus on agile methodologies with small and medium size teams, pixel-perfect development, responsive design and easy-to-maintain Front-End development. Excellent team player with demonstrated experience as a leader. Active collaborator with all levels of staff and management to exceed customer expectations and revenue goals. Passionate about product development and constant innovation. Entrepreneurial spirit and heavy international experience with enterprise projects, startups and multi-cultural teams. Specialties: Angular 8+, Automation (Protractor), Unit Tests (Karma), Front-End Architecture, Node, Jenkins, Splunk, UX Design, rapid prototyping

Updated on June 14, 2022

Comments

  • Diego Sarmiento
    Diego Sarmiento almost 2 years

    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!