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

编辑你的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();
        }
    });
});

不要将value1隐藏起来。

Answer 2

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

用于选择菜单的jQuery条件代码

2 个答案: