Estoy haciendo un formulario que posee varios select
, unos simples y otros múltiples. Los valores que se seleccionan en esos select
aparecen en un span
en forma de texto.
Tengo el siguiente código:
var ninguno = true;
function displayValores() {
var selectValues = $("#myid").val() || [];
var select_and_or = $("#and_or").val();
// si Ninguno está marcado pero se marca algo diferente
if (ninguno && (selectValues.length > 1 || selectValues[0] != "Ninguno")) {
// desmarcar ninguno
$("#myid option[value=Ninguno]").removeAttr("selected");
// actualizar los nuevos valores seleccionados
selectValues = $("#myid").val()
// indicar que Ninguno ya no está marcado
ninguno = false;
// si Ninguno no está marcado y se marca
} else if (!ninguno && selectValues.indexOf("Ninguno") > -1) {
// dejarlo como único valor
$("#myid").val("Ninguno");
// actualizar los nuevos valores seleccionados
selectValues = $("#myid").val()
// indicar que Ninguno ya está marcado
ninguno = true;
}
document.querySelector('.mostrar').innerHTML = selectValues.join(" " + select_and_or + " ");
$('.mostrar').html(selectValues.join(" " + select_and_or + " "));
}
$("select").change(displayValores);
displayValores();
.row {
margin-left: 30px;
margin-right: 30px;
margin-top: 50px;
}
<!DOCTYPE html>
<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/0.100.2/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/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('select').material_select();
});
$('select').material_select("destroy");
</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 Value="Ninguno" selected>Ninguno</option>
<option> Amarillo</option>
<option>Azul</option>
<option>Rojo</option>
</select>
</div>
</div>
Lo que deseo es lo siguiente: Que al seleccionar cualquier opción diferente a la opción "Ninguno" esta opción se me desmarque y se marque cualquiera de las otras opciones 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" me aparecerá marcada por defecto ya que tiene el atributo
selected
. Cuando esté así se mostrará "Ninguno" en elspan
y nada más. - Si el usuario selecciona otra de las opciones del select, por ejemplo "Amarillo", "Azul" o "Rojo", entonces la casilla de "Ninguno" debe desmarcarse.
- Si el usuario vuelve a seleccionar la casilla de "Ninguno" entonces las opciones que ya había seleccionado deben desmarcarse y no podrán mostrarse en el span, por supuesto la opción "Y/O" del primer select tampoco debe aparecer.
ilustrado en imagenes esto es lo que se desea lograr:
Cuando la casilla "Ninguno" este seleccionada las demás opciones deben estar sin selección.
Cuando el usuario seleccione uno o más colores de la lista, debería desmarcarse automáticamente la opción "Ninguno", es decir ya no puede estar seleccionada.
Si el usuario vuelve a seleccionar la opción "Ninguno", automáticamente las opciones que estaban seleccionadas (en este caso Amarillo y Rojo) deben desmarcarse. (Debería quedar como en la primera imagen).
Ahora bien, Con la implementación del código anterior no se obtiene al 100% el resultado deseado.
Este es el resultado de aplicar el código anterior: esto se debe colocar al inicio del de la etiqueta body, de esta forma materialize permite que se creen los elementos "Select". Si esto no se coloca al inicio, sencillamente los selects no se muestran.
inicialmente Ninguno esta seleccionado por defecto.
como se puede ver en la imagen, si selecciono algún color, la casilla "Ninguno" no se desmarca.
cuando el selectbox se cierra, "Ninguno" no sale reflejado en la parte superior (span) pero si sale reflejado en la casilla del Select.
¿Qué podría hacer para solucionar este problema? El framework que estoy usando para el diseño de la web es: Materializecss. Cabe acotar que este Framework tiene un plugin para manejar los elementos Selects, cuando se crea un select, de forma oculta se añaden otros elementos con los cuales por medio de jquery se maneja al elemento select. Aqui una imagen de los elementos que se agregan cuando se crea un elemento select:
Creo que los elementos li juegan un papel importante en este caso.