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一起放置