Select2“全选”勾选从数据库表中获取选项的位置答案

【问题标题】：Select2 "select all" tick where option are fetched from DB tableSelect2“全选”勾选从数据库表中获取选项的位置
【发布时间】：2021-08-09 00:07:26
【问题描述】：

我正在尝试将数据库表行作为我使用 Select2 jQuery 的下拉选项，所有选项都显示所以我想要“全选”打勾，但是当我打勾“全选”时没有任何反应，请有人帮我使用代码，因为我是编程新手我正在尝试将数据库表行作为我使用 Select2 jQuery 的下拉选项，所有选项都显示所以我想要“全选”打勾，但是当我打勾“全选”时没有任何反应，有人请帮我写代码，因为我是编程新手我正在尝试将数据库表行作为我使用 Select2 jQuery 的下拉选项，所有选项都显示所以我想要“全选”打勾，但是当我打勾“全选”时没有任何反应，有人请帮我写代码，因为我是编程新手

代码如下


  
</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>

【问题讨论】：

标签： javascript php mysql jquery-select2 selectall

【解决方案1】：

如下更新您的chkall input click even 处理程序方法，因为您错误地设置了selected property。

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

【讨论】：

OP 正在使用select2 插件，所以无论何时在下拉列表中进行任何更改，我们都需要使用trigger("change") 否则更改将不会更新，即：$("#vmop").trigger("change");。阅读更多here。
谢谢你们，我尝试使用上面的脚本，但仍然勾选 Selectall 复选框没有给出结果。