Select2“全选”勾选从数据库表中获取选项的位置
Posted
技术标签:
【中文标题】Select2“全选”勾选从数据库表中获取选项的位置【英文标题】：Select2 "select all" tick where option are fetched from DB table 【发布时间】：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>
【问题讨论】：
【参考方案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 复选框没有给出结果。以上是关于Select2“全选”勾选从数据库表中获取选项的位置的主要内容，如果未能解决你的问题，请参考以下文章