Question

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

首先，选中选项“无”，因为该选项具有“已选择”属性。我希望当我选择黄色，蓝色或红色等选项时，选项“无”会自动变为“未标记”。此图片中的示例：

None has to be unckecked when I select another option

如果我再次点击“无”，其他选项必须取消选中。我希望通过JQuery实现这一点，但我尝试过做很多事情，但我无法获得我想要的结果。你们能帮助我吗？我在一个项目中工作，这部分非常重要。

我尝试使用prop（）和Attr（）等函数，删除属性“Selected”，但它不起作用。问题是Materialise使用插件来选择。

这是我的代码：

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中这是可能的，我建议你以不同的方式做到这一点。把'没有'＆＃39;复选框中的多选复选框，位于其顶部，并在选择/取消全选中重命名，因此当有人选中/取消选中它时，您将检查所有/无输入。

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

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

对于选择

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

修改

我不知道你的插件是如何工作的，但我认为它有一些api函数来选择/取消选择它们在js中的值。查看文档插件

当我点击同一个选项的另一个选项时，如何在选择的多个选项中取消选中一个选项？

1 个答案: