How to create checkbox inside the form group selection HTML Javascript?

Question

Currently, I have 200+ countries list in my database. I want to create a checkbox for the countries selection. Even I already put the html type as a checkbox, the checkbox still doesn't exist in my selection form. How to create checkbox actually?

HTML :

<div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label>Country</label>
                    <select class="form-control"  name="country_id[]" multiple  size="10" style="height: 100%;">
                        @foreach ($countries as $item)
                            <option value="{{$item->id}}" selected>{{$item->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

Answer 1

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript.

 var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }

 .multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #dadada solid; } #checkboxes label { display: block; } #checkboxes label:hover { background-color: #1e90ff; }

 <form> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one"> <input type="checkbox" id="one" />First checkbox</label> <label for="two"> <input type="checkbox" id="two" />Second checkbox</label> <label for="three"> <input type="checkbox" id="three" />Third checkbox</label> </div> </div> </form>

Also you can use Bootstrap Multiselect plugin.