在一定条件下取消选中多选框的选中项答案

【问题标题】：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 中的任何一个，那么管理员应该取消选择吗？

标签： jquery forms select

【解决方案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' 不会取消选择