在一定条件下取消选中多选框的选中项
Posted
技术标签:
【中文标题】在一定条件下取消选中多选框的选中项【英文标题】：deselect a selected item of a multi-select box under a certain condition 【发布时间】：2018-08-18 17:56:17 【问题描述】：如果选择了另一个选项，我正在尝试弄清楚如何取消选择多选框的选定项目。在以下场景中，如果选择了任何其他选项（或所有其他选项），我只想取消选择选项“管理员”（默认值）。
简单地说：默认选择admin，如果用户选择'user'或者'editor'或者两者都选，admin应该取消选择。
目前，它不会取消选择。
$('#groups').on('change', function ()
var selected = $('#groups').find('option:selected').val();
console.log('selected: ' + selected);
// if anything other than admin is selected deselect admin
if (selected !== 'admin')
$('#admin').prop('selected', false);
);
html：
<div class="col-md-3">
<select class="form-control" id="groups" multiple>
<option value="admin" selected="selected" id="admin">Admin Only</option>
<option value="user">User</option>
<option value="editor">Editor</option>
</select>
</div>
【问题讨论】：
什么是组变量？ Console.log 你选择的让看看他在检索什么 我的错误是我更改了代码，使其更适合堆栈。该变量刚刚引用了组选择器$('#groups')。我现在已经更新了。
所以您一次只想要一个选择？
不，那我就用一个普通的选择框。基本上默认选择admin，如果用户选择'user'或者'editor'或者两者都选，admin应该取消选择。
如果他同时选择user 和editor 或user 或editor 中的任何一个，那么管理员应该取消选择吗？
【参考方案1】：
我想通了：
groups.on('change', function ()
// if anything other than admin is selected deselect admin
var selected = groups.find('option:selected');
console.log('selected: ' + selected.val());
if (selected.val() == 'admin' && selected.length == 1)
$('#admin').prop('selected', true);
else
$('#admin').prop('selected', false);
);
groups 只是选择器的别名。
【讨论】：
【参考方案2】：$('#groups').on('change', function ()
var values = $(this).val();
var new_values = [];
if ((values.includes('user')) || (values.includes('editor')))
for(var i=0; i<values.length; i++)
if (values[i] !== 'admin')
new_values.push(values[i])
$(this).val(new_values);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<select class="form-control" id="groups" multiple>
<option value="admin" selected="selected" id="admin">Admin Only</option>
<option value="user">User</option>
<option value="editor">Editor</option>
</select>
</div>【讨论】：
它可以工作，但我更喜欢我找到的解决方案，因为它涉及的代码更少！为这项努力点赞！【参考方案3】：好吧，你可以循环遍历select options，当select option 的值为"admin" 出现时，你可以通过将 selected 属性设置为 false 来取消选中它。
$(function()
$('#groups').on('change', function()
let selected = $('#groups').find('option:selected');
selected = Array.from(selected);
console.log(selected);
if(!(selected.length == 1 && selected.value == admin))
selected.forEach(item =>
if (item.value == "admin")
item.selected = false;
);
);
);<!DOCTYPE HTML>
<HTML>
<HEAD>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</HEAD>
<BODY>
<select id="groups" multiple>
<option value="admin" selected="selected" class="optionValue">Admin Only</option>
<option value="user" class="optionValue">User</option>
<option value="editor" class="optionValue">Editor</option>
</select>
</BODY>
</HTML>【讨论】：
这真的行不通。点击 ctrl 并选择 'admin' 和 'user'... 'admin' 不会取消选择 现在可以使用了！我更喜欢我的版本，因为它的代码更少，但要为我的努力投票！ @Alex 你现在可以检查一下吗？ 我做到了！见上一条评论！【参考方案4】：在我尝试过的 jQuery 2.2.4 版本中取消选择下面包含的选定选项。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-3">
<select class="form-control" id="groups" multiple="multiple">
<option value="admin" selected="selected" id="admin">Admin Only</option>
<option value="user">User</option>
<option value="editor">Editor</option>
</select>
</div>
</body>
</html>
<script>
$('#groups').on('change', function ()
var selected = $('#groups').find('option:selected').val();
console.log('selected: ' + selected);
if (selected == 'admin')
$("#groups > option:selected").attr("selected",false);
$('#groups > option[value="admin"]').prop('selected', true);
);
</script>
【讨论】：
无论如何，这段代码总是选择管理员。这与我想要实现的目标相反...... 现在修改了脚本的一些变化 按 ctrl 并选择 'admin' 和 'user'... 'admin' 不会取消选择以上是关于在一定条件下取消选中多选框的选中项的主要内容，如果未能解决你的问题，请参考以下文章