tengo este codigo:
Código HTML :
<head>
<meta charset="utf-8">
<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">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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">
<span class="mostrar"></span>
<div>
<div class="row">
<div class="elegir">
<select id="and_or">
<option selected>Y</option>
<option>O</option>
</select>
</div>
</div>
<div class="row">
<div class="colores">
<select id="myid" multiple="multiple">
<option selected>Ninguno</option>
<option> Amarillo</option>
<option>Azul</option>
<option>Rojo</option>
</select>
</div>
</div>
<script>
function displayValores() {
var selectValues = $("#myid").val() || [];
var valorSelect1 = $("#and_or").val();
document.querySelector('.mostrar').innerHTML = selectValues.join(" " + valorSelect1 + " ");
$('.mostrar').html(selectValues.join(" " + valorSelect1 + " "));
}
$("select").change(displayValores);
displayValores();
</script>
Lo que necesito es que: Al seleccionar cualquiera de los colores de la lista (Amarillo, Azul o Rojo), la opción "Ninguno" se desmarque automáticamente, y que aparte se muestre la selección que haga el usuario de las opciones "y"/"o" del primer select.
Es decir:
La opción "Ninguno" aparece marcada por defecto ya que tiene el atributo selected. Cuando esta así, se muestra "Ninguno" en el span y nada más.
Si el usuario selecciona otra de las opciones del select, por ejemplo "Amarillo", "Azul" o "Rojo", entonces la opción "Ninguno" debe desmarcarse automaticamente, no debe aparecer seleccionada.
Si el usuario vuelve a seleccionar la opción "Ninguno" entonces las opciones que ya había seleccionado (Amarillo, Azul o Roo) deben desmarcarse automáticamente y no podrán mostrarse en el span, por supuesto la opción "Y/O" del primer select tampoco debe aparecer.
El framework que estoy usando para el diseño del sitio web es Materializecss.
He intentado hacer varias cosas con JQuery para lograr el resultado deseado pero hasta ahora no he conseguido que el select se comporte de esa manera. Qué sugerencias me podrian dar?.
