Materializecss 프레임워크를 사용하여 html로 양식을 작성하고 있으며 양식에서 varios가 여러 항목을 선택합니다. 내 선택에서 다음 결과를 얻고 싶습니다.
먼저 해당 옵션에 "선택됨"속성이 있으므로 "없음"옵션이 선택됩니다. 노란색, 파란색 또는 빨간색과 같은 옵션을 선택하면 "없음"옵션이 자동으로 "고정 해제"되는 것을 원합니다.이 이미지의 예 :
다시 "없음"을 클릭하면 다른 옵션은 선택 취소해야합니다. JQuery로 그것을 얻고 싶지만 많은 일을 시도했지만 원하는 결과를 얻을 수 없습니다.도와 주 시겠어요? 저는 프로젝트에서 일하고 있는데이 부분은 정말 중요합니다.
prop () 및 Attr ()과 같은 함수를 사용하여 "선택됨"속성을 제거했지만 작동하지 않습니다. 문제는 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>
