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

I have a drop down, which on select shows different checkboxes.

Say for eg:

on selecting value1 in dd- i get checkbox1a, checkbox1b, etc

on selecting value2 in dd - i get checkbox2a, checkbox2b etc.

On page load, i want to retain all the selected checkboxs with its values whichever is checked .

I have tried like below.

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

But everytime the page loads the drop down value will load empty.

I have to manually select 'Choose one' (default drop down) and again select the dropdown value.

Also selected checkboxes and drop down value is not retaining.

Design:

If I understand your problem well, it is that when loading the page there is no default value, to set a selected value you can use:

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

And with the checkboxes

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

selected and checked

down this selected option you can now put your options with the foreach