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

编程问答 2022-05-01

问题描述

我正在尝试将 DB 表行作为我使用 Select2 jQuery 的下拉选项，所有选项都显示，所以我想要“全选”勾选，但是当我勾选“全选”时什么也没有发生，有人请帮助我使用代码，因为我是编程新手 我正在尝试将 DB 表行作为我使用 Select2 jQuery 的下拉选项，所有选项都显示，所以我想要“全选”勾选，但是当我勾选“全选”时没有任何反应，有人请帮我代码，因为我是编程新手 我正在尝试将 DB 表行作为我使用 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/[email protected]/dist/js/select2.min.js"></script>
    <script>
        $(".multiple-select").select2({});
    </script>
</body>

解决方法

更新您的 chkall input 点击偶数处理程序方法如下，因为您设置的 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");
  }
});