jquery php保留下拉值并选择复选框值

Question

我有一个下拉菜单，在选择时会显示不同的复选框。

例如：

在 dd 中选择 value1 - 我得到 checkbox1a、checkbox1b 等

在 dd 中选择 value2 - 我得到 checkbox2a、checkbox2b 等。

在页面加载时，我想保留所有选中的复选框及其值，以选中者为准。

我已经尝试如下。

<input class="inputabs" type="radio" id ="pref_checkbox" name="target_criteria" value="preference_based_users" onclick="preferenceBasedCountFun()"> Select based on preference<br><br>
Preference -- :
    <select name="Keys[]" id="key_<?php echo $divid; ?>" rel="<?php echo $divid; ?>" class="key-class" onchange="return getPreferenceValues(this, '<?php echo $divid; ?>');">
        <option value="" alt="">Choose one</option>
        <?php foreach ($prefernces as $key => $value) { ?>
                    <option value="<?php echo $value['id'] . '/' . $value['FieldType'] . '/' . $value['EqualRange'] . '/' . $value['SingleMultiple']; ?>" alt="<?php echo $value['id']; ?>"><?php echo $value['FieldName']; ?></option>
        <?php } ?>
    </select>

JS

$(document).ready(function() {
//Here if the local storage value is 'preference_based_users' ie the above radio
    var element = $(".key-class");
    element.on('change', function() {
        localStorage.setItem('c', $(this).val());
    });

    var v = localStorage.getItem('c');
        element.val(v);
});

但每次页面加载下拉值都会加载为空。

我必须手动选择“选择一个”（默认下拉）并再次选择下拉值。

同时选中的复选框和下拉值未保留。

设计：

Answer 1

如果我很好理解你的问题，那就是在加载页面时没有默认值，设置一个选定的值可以使用：

<option value="option" selected>Option selected</option>

还有复选框

<input type="checkbox" name="option" value="option" checked>

选择并检查

在这个选定的选项下，您现在可以使用 foreach 放置您的选项