Append the checked checkbox values to the dropdown

Question

I want to display the "config" dropdown if the checked count of "valve_type_array" checkbox is greater than zero. And append the checked checkbox values to the "config" dropdown. I'm stucked in appending the checked checkbox values to the dropdown. Any help would be greatly appreciated.

HTML:

<div id="type">
<input type="checkbox" name="valve_type_array[]" value="Test1"><span>Test1</span><br>
<input type="checkbox" name="valve_type_array[]" value="Test2"><span>Test2</span><br>
<input type="checkbox" name="valve_type_array[]" value="Test3"><span>Test3</span><br>
<input type="checkbox" name="valve_type_array[]" value="Test4"><span>Test4</span>
</div>

<select class="form-control hide" id="config" name="config">
    <option value="">Please select</option>
</select>

jQuery:

$(document).ready(function(){
    var $checkboxes = $('#type input[type="checkbox"]');        
        $checkboxes.change(function(){
            var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
            if(countCheckedCheckboxes > 0){
                $("#config").show();
        }
    });

});

Rory McCrossan · Accepted Answer · 2020-04-30T09:30:37.357

You need to create an option element for each checked box and then append that to the #config select. You can use map() to create the options in the most effective way:

$(document).ready(function() {
  let $config = $('#config');
  let $checkboxes = $(':checkbox');

  $checkboxes.on('change', function() {
    $('option.dynamic').remove();
    let options = $checkboxes.filter(':checked').map((i, el) => `<option class="dynamic" value="${el.value}">${el.value}</option>`).get();
    $config.append(options);
  }).trigger('change');
});

label { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="valve_type_array[]" value="Test1"><span>Test1</span></label>
<label><input type="checkbox" name="valve_type_array[]" value="Test2" checked><span>Test2</span></label>
<label><input type="checkbox" name="valve_type_array[]" value="Test3"><span>Test3</span></label>
<label><input type="checkbox" name="valve_type_array[]" value="Test4"><span>Test4</span></label>

<select class="form-control hide" id="config" name="config">
  <option value="">Please select</option>
</select>

With regard to programmatically opening the select option list, unfortunately that's not possible.

There used to be a workaround for Chrome only, but that no longer works as of Chrome v53. More details on that are here.

Thanks Rory for the reply. One thing I forget to mention. In some cases, few of the checkboxes are pre-checked. So it should check on page load if any of the checkboxes are selected, if so that also need to add in the dropdown. Other than that your code is working fine. — , Apr 30 '20 at 09:29
In that case you can `trigger()` the change event to happen as soon as the DOM has loaded. I updated the answer to show you how to do that — Rory McCrossan, Apr 30 '20 at 09:31
Can u highlight about the hide and show also as I mentioned in the question? Dropdown should display only if the checked count is more than one. — , Apr 30 '20 at 09:51
If you mean showing the options list, I already noted that isn't possible in the last paragraph of the answer. — Rory McCrossan, Apr 30 '20 at 09:54

Append the checked checkbox values to the dropdown

1 Answers1