jQuery keep show hide state based on select option

Question

I have drop down select and show hide other fields (within divs) based on option selected in the dropdown list.

This code works fine and show hide based on selection but

Answer 1

I would suggest adding a class for your loaded content which will make them hidden.

HTML

    Select Layout Type
    layout_type1
    layout_type2
    layout_type3
    layout_type4
    layout_type5
    layout_type6
    layout_type7
    layout_type8



    

        
    

JS

$('#row1_layout_options').change(function() {
   $('#layouts>div.selected').removeClass('selected');
   $('#row1_col1_' + $(this).val()).addClass('selected');
});

CSS

#layouts>div{
    display:none;
}

#layouts>div.selected{
    display:block;
}

EDIT : Saving selected

As for saving the selected option you have these non exhaustive list of solution :

• HTML5 localstorage, you can use localStorage which is a javascript accessible store that is flushed like cookies. I wouldn't recommend that one I found it very much unreliable.
• Server side persistence. Basically when you set an option as selected you send a query to a webservice that will save the state somewhere (DB, object instance etc...)
• URL modification. that's not really a persistence solution but it could match the need sometimes. You can retrieve a value in the URL parameter section like http://localhost/mysite?selectedId=2. This way you can have the information directly within the link. Easier to share the state.