选择菜单的jQuery条件代码[重复]答案

【问题标题】：jQuery conditional code for select menu [duplicate]选择菜单的jQuery条件代码[重复]
【发布时间】：2015-02-11 17:44:58
【问题描述】：

我有一些条件 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

【问题讨论】：

这听起来像是在问两个问题。重新加载页面后如何保持选择菜单和复选框的值，以及如何获取需要在页面加载时出现的复选框。对吗？
了解如何使用本地存储或 cookie。

标签： jquery html

【解决方案1】：

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

【讨论】：

感谢您的帮助，我在将会话存储应用到我的代码时遇到了一些麻烦，但我认为这是最好的方法 :)

【解决方案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();
        }
    });
});

不要隐藏 value1 的默认值。

【讨论】：