当我单击同一选择的另一个选项时，如何才能获得多个选择的未选择选项？

Question

我正在使用Materializecss框架在html中创建表单，并且我有多种选择在表单中使用倍数。 我想在我的选择中得到下一个结果：

首先，检查选项“无”，因为该选项具有属性“已选择”。 我希望当我选择黄色，蓝色或红色之类的选项时，选项“无”会自动“松开”。 此图中的示例：

如果我再次单击“无”，则必须取消选中其他选项。 我想用JQuery做到这一点，但我尝试做很多事情，但无法获得想要的结果。 你们能帮我吗？ 我正在一个项目中，这部分非常重要。

我已经尝试过使用诸如prop（）和Attr（）之类的函数，删除了“ Selected”属性，但是它不起作用。 问题是Materialize使用选择的插件。

这是我的代码：

 var none = true; function displayValores() { var selectValues = $("#myid").val() || []; var valueSelect1 = $("#and_or").val(); if (none && (selectValues.length > 1 || selectValues[0] != "None")) { $("#myid [option=selected]").removeAttr("selected"); selectValues = $("#myid").val() none = false; } else if (!none && selectValues.indexOf("None") > -1) { $("#myid").val("None"); selectValues = $("#myid").val() none = true; } $('.show').html(selectValues.join(" " + valueSelect1 + " ")); } $("select").change(displayValores); displayValores();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>SELECT MATERIALIZE</title> </head> <body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('select').select(); }); </script> <div class="row"> <div class="col s4"> <span>The colours are: </span><span class="show"></span> </div> </div> <br> <br> <div class="row"> <div class="col s2" style="margin-left: 600px;"> <select id="and_or"> <option>and</option> <option>or</option> </select> </div> </div> <div class="row"> <div class="col s4"> <select id="myid" multiple="multiple"> <option value="None" selected>None</option> <option value="Yellow">Yellow</option> <option value="Blue">Blue</option> <option value="Red">Red</option> </select> </div> </div>

Answer 1

即使这在jQuery中是可行的，我还是建议您以不同的方式进行。 将“无”复选框置于多选复选框的顶部，然后在“全选/取消全选”中重命名，这样当有人选中/取消选中该复选框时，您将全部/不选中所有输入。

您可以通过以下方式在jQuery中检查输入：

$('input[value="myValue"]').prop('checked', true);

对于选择

$('option[value="myValue"]').prop('selected', true);

编辑

我不知道您的插件如何工作，但我认为它具有一些api函数，可根据其在js中的值来选择/取消选择选项。 查看文档插件

当我单击同一选择的另一个选项时，如何才能获得多个选择的未选择选项？

问题描述

1 个解决方案

解决方案1
0 2017-12-02 07:54:58

当我单击同一选择的另一个选项时，如何才能获得多个选择的未选择选项？

问题描述

1 个解决方案

解决方案1 0 2017-12-02 07:54:58

解决方案1
0 2017-12-02 07:54:58