Como desmarcar una opción de un select multiple cuando se seleccione otra opcion de ese mismo select
Publicado por Karls Bravo (1 intervención) el 01/12/2017 06:30:22
Estoy haciendo un formulario que posee varios selects, unos simples y otros múltiples. Los valores que se seleccionan en esos select aparecen en un span en forma de texto.
el framework que estoy usando para el diseño de la web es Materializecss.
Este es el código que tengo hasta ahora:
Lo que estoy tratando de hacer es: 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:
Si el usuario selecciona alguno de los colores, por ejemplo "Amarillo", "Azul" o "Rojo", entonces la casilla de "Ninguno" debe desmarcarse, no puede aparecer seleccionado.
Si el usuario vuelve a seleccionar la casilla de "Ninguno" entonces los colores que ya había seleccionado deben desmarcarse automaticamente y no podrán mostrarse en el span, por supuesto la opción "Y/O" del primer select tampoco debe aparecer.
Estoy usando el framework materializecss. He intentado con JQuery lograr el resultado deseado pero hasta ahora no lo he conseguido. Qué sugerencias podrian darme que me ayude a lograr lo que deseo?
el framework que estoy usando para el diseño de la web es Materializecss.
Este es el código que tengo hasta ahora:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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/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 value="Ninguno" selected>Ninguno</option>
<option> Amarillo</option>
<option>Azul</option>
<option>Rojo</option>
</select>
</div>
</div>
<script>
var ninguno = true;function displayValores() {
var selectValues = $("#myid").val() || [];
var valorSelect1 = $("#and_or").val();
if (ninguno && (selectValues.length > 1 || selectValues[0] != "Ninguno")) {
$("#myid option[value=Ninguno]").removeAttr("selected");
selectValues = $("#myid").val()
ninguno = false;} else if (!ninguno && selectValues.indexOf("Ninguno") > -1) {
$("#myid").val("Ninguno");
selectValues = $("#myid").val()
ninguno = true; }$('.mostrar').html(selectValues.join(" " + valorSelect1));
}$("select").change(displayValores);
displayValores();
</script>
Lo que estoy tratando de hacer es: 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:
Si el usuario selecciona alguno de los colores, por ejemplo "Amarillo", "Azul" o "Rojo", entonces la casilla de "Ninguno" debe desmarcarse, no puede aparecer seleccionado.
Si el usuario vuelve a seleccionar la casilla de "Ninguno" entonces los colores que ya había seleccionado deben desmarcarse automaticamente y no podrán mostrarse en el span, por supuesto la opción "Y/O" del primer select tampoco debe aparecer.
Estoy usando el framework materializecss. He intentado con JQuery lograr el resultado deseado pero hasta ahora no lo he conseguido. Qué sugerencias podrian darme que me ayude a lograr lo que deseo?
Valora esta pregunta
0