jQuery conditional code for select menu

Question

I have some conditional jQuery code which shows input checkboxes depending on the value of a select dropdown menu. This seems to work ok but when the page is refreshed the checkboxes hide, its not until you select a value again from the select box that the correct checkboxes appear again.

Is there a way to keep the values of both the select menu and the checkboxes after the page is reloaded?

Here is my HTML code:

<select class="wpp_search_select_field_location">
   <option value="Marbella">Marbella</option>
   <option value="Costa Del Sol West"> Costa Del Sol West</option>
</select>

<ul class="seach_attribute_marbella_areas">
   <li><input type="checkbox" value="option1" name="option1"/>Option 1</li>
   <li><input type="checkbox" value="option2" name="option2"/>Option 2</li>
    <li><input type="checkbox" value="option3" name="option3"/>Option 3</li>
</ul>

<ul class="seach_attribute_costa_del_sol_west">
    <li><input type="checkbox" value="option4" name="option4"/>Option 4</li>
    <li><input type="checkbox" value="option5" name="option5"/>Option 5</li>
    <li><input type="checkbox" value="option6" name="option6"/>Option 6</li>
 </ul>

jQuery:

$(document).ready(function() {
var $value1 = $('.seach_attribute_marbella_areas').hide();
var $value2 = $('.seach_attribute_costa_del_sol_west').hide();

$('.wpp_search_select_field_location').change(function() {         
    var selectedValue = $(this).val();

    if(selectedValue  === 'Marbella') {
        $value1.show();
        $value2.hide();
    } else if (selectedValue === 'Costa Del Sol West') {
        $value1.hide();
        $value2.show();
    } else {
        $value1.hide();
        $value2.hide();
    }
});

});

You will see in the jsfiddle below that the checkboxes only appear when you select a value from the select box. The checkboxes need to appear on page load.

jsfiddle

This sounds like you're asking two questions. How to keep the values of both the select menu and the checkboxes after the page is reloaded, and how to get the checkboxes need to appear on page load. Is that correct? — j08691, Feb 11 '15 at 17:49

score 0 · Answer 1 · answered Feb 11 '15 at 17:49

edit your JS to

$(document).ready(function() {
    var $value1 = $('.seach_attribute_marbella_areas');
    var $value2 = $('.seach_attribute_costa_del_sol_west').hide();

    $('.wpp_search_select_field_location').change(function() {         
        var selectedValue = $(this).val();

        if(selectedValue  === 'Marbella') {
            $value1.show();
            $value2.hide();
        } else if (selectedValue === 'Costa Del Sol West') {
            $value1.hide();
            $value2.show();
        } else {
            $value1.hide();
            $value2.hide();
        }
    });
});

Dont hide value1 from default.

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

You need to persist the selected values. Persisting values in JavaScript object across browser refresh explains your options for doing so.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 11 '15 at 17:51

Matthew Jaspers

1,546
1
10
13

Thanks for you help, I am having a bit of trouble applying the session storage to my code but I think this is the best method :) – Future Webs Feb 11 '15 at 18:28

jQuery conditional code for select menu

2 Answers2