选择菜单的jQuery条件代码

Question

我有一些条件jQuery代码，根据选择下拉菜单的值显示输入复选框。这似乎可以正常工作，但当页面刷新时，复选框会隐藏，直到您再次从选择框中选择一个值再次显示正确的复选框。

有没有办法保持页面重新加载后的选择菜单和复选框的值？

这里是我的HTML代码：

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

}）;

您将在下面的jsfiddle中看到复选框仅在您从选择框中选择一个值时出现。复选框需要在页面加载时出现。

jsfiddle

Answer 1

您需要保留选定的值。 Persisting values in JavaScript object across browser refresh解释你的选择。

Answer 2

编辑您的JS从默认

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

不要隐藏值1。