Select2 "select all" tick where option are fetched from DB table

Question

I am trying to get DB table row as dropdown options for which I have used Select2 jQuery, all options are showing so I wanted "select all" tick , but nothing happens when I tick "select all", somebody please help me with the code, as I am new to programming I am trying to get DB table row as dropdown options for which I have used Select2 jQuery, all options are showing so I wanted "select all" tick , but nothing happens when I tick "select all", somebody please help me with the code, as I am new to programming I am trying to get DB table row as dropdown options for which I have used Select2 jQuery, all options are showing so I wanted "select all" tick , but nothing happens when I tick "select all", somebody please help me with the code, as I am new to programming

code is as follows


  
</head>

<body>
    <div class="col">
        
        <br>
        <!------------------------------------------------------------------->
        <div class="row bodi">

            <div class="col-lg-6">
                <label for="">
                    <h5> <u> MV : </u></h5><br>
                </label>
                <select name="MV[]" class="custom-select w-50 custom-select-lg mb-3 multiple-select" id="vmop" multiple>
                    <!--******************************************************************-->
                    <?php
                    $con = mysqli_connect("localhost", "root", "", "mv");
                    $query = "SELECT * FROM m";
                    $query_run = mysqli_query($con, $query);

                    if (mysqli_num_rows($query_run) > 0) {
                        foreach ($query_run as $rowmv) {
                    ?>

                            <option value=""> <?php echo $rowmv['details'] ?></option>
                    <?php

                        }
                    } else {
                        echo "no record found";
                    }

                    ?>
                    <!--*******************************************************************-->
                </select>
                <br>
                <input id="chkall" type="checkbox" >Select All
            </div>
            <!------------------------------------------------------------------->
            
            <!------------------------------------------------------------------->

        </div>




    </div>
    <!------------------------------------------------------------------->
    <script type="text/javascript">
$(document).ready(function() {
    $('#vmop').select2();
    
    $("#chkall").click(function(){
        if($("#chkall").is(':checked')){
            $("#vmop > option").prop("selected", "selected");
            $("#vmop").trigger("change");
        } else {
            $("#vmop > option").removeAttr("selected");
            $("#vmop").trigger("change");
        }
    });
});
</script>


    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(".multiple-select").select2({});
    </script>
</body>

Rahul Kumar · Answer 1 · 2021-05-20T05:36:49.060

1

Update your chkall input click even handler method as below, because you are setting the selected property incorrectly.

$("#chkall").click(function () {
  if ($("#chkall").is(':checked')) {
    $('#vmop option').prop('selected', true);
    $("#vmop").trigger("change");
  } else {
    $('#vmop option').prop('selected', false);
    $("#vmop").trigger("change");
  }
});

edited May 20 '21 at 05:36

answered May 19 '21 at 18:17

Rahul Kumar

3,009
2
16
22

OP is using `select2` plugin so whenever any changes made in dropdown we need to use `trigger("change")` else changes will not be updated i.e : `$("#vmop").trigger("change");` .Read more [here](https://select2.org/programmatic-control/add-select-clear-items#selecting-options) . – Swati May 20 '21 at 05:34
Thank you both, I tried using above script but still ticking Selectall checkbox doesnt give result. – Rajdeep Naik May 20 '21 at 07:26

Select2 "select all" tick where option are fetched from DB table

1 Answers1