Pregunta:

Fecha: 29-11-2017 18:03:04 (En Español)

Con JQuery: Cómo puedo desmarcar un <option> de un select multiple cuando seleccione otra opcion de ese mismo select? framework utilizado: Materializecss[No resuelta]

Buenas noches, tengo el siguiente codigo:

function displayValores() {
var selectValues = $( "#myid" ).val() || [];
var valorSelect1 =$("#and_or").val();

document.querySelector('.mostrar').innerHTML = selectValue.join( " " + valorSelect1 );
$('.mostrar').html(selectValue.join( " " + valorSelect1));
}

$( "select" ).change( displayValores );
displayValores();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<div class="row">
<span class="mostrar"></span>
<div>

Estoy haciendo un formulario que posee varios selects, unos simples y otros multiples. Los valores que se seleccionan en esos select aparecen en un span en forma de texto. Lo que deseo es lo siguiente: Que al seleccionar cualquier opcion diferente a la opcion "Ninguno" esta opcion 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: 1. La opcion "Ninguno" me aparecera marcada por defecto ya que tiene el atributo selected. Cuando este asi se mostrara "Ninguno" en el span y nada más. 2. Si el usuario selecciona otra de las opciones del select, por ejemplo "Amarillo", "Azul" o "Rojo", entonces la casilla de "Ninguno" debe desmarcarse. 3. Si el usuario vuelve a seleccionar la casilla de "Ninguno" entonces las opciones que ya habia seleccionado deben desmarcarse y no podran mostrarse en el span, por supuesto la opcion "Y/O" del primer select tampoco debe aparecer.

Que podría hacer? He probado con varias opciones pero ninguna me permite obtener el resultado deseado. Agradeceria mucho su ayuda.
Etiquetas: CSS - CSS3 - Desarrollo - Formulario - HTML - HTML5 - Javascript - JQuery - Pregunta - Query - Web Votos: 1 - Respuestas: 8 - Vistas: 9 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

Txema Artzain Karma: 3097

Fecha: 30-11-2017 09:44:23 Hola Carmen:
Creo que se ajusta a lo que quieres:

HTML (el mismo que tienes):

<div class="row">
<div class="colores">
  <select id="myid" multiple="multiple">
<!-- puedes poner con HTML5   <select id="myid" multiple> -->
    <option selected>Ninguno</option>
    <option> Amarillo</option>
    <option>Azul</option>
    <option>Rojo</option>
  </select>
</div>

</div>
<div class="row">
<div class="elegir">
<select id="and_or">
<option selected>Y</option>
<option>O</option>
</select>
</div>
</div>

<div class="row">
<span class="mostrar"></span>
<div>

Con JQuery 2:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function displayVals() {
  var singleValues = $("#and_or").val();
  var multipleValues = $( "#myid" ).val() || [];
  $(".mostrar").html( "<b>and_or:</b> " + singleValues + "<br> <b>Multiple:</b> " + multipleValues);
}

$("select").change(displayVals);
displayVals();
</script>

Con JQuery 3:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function displayVals() {
  var singleValues = $("#and_or").val();
  var multipleValues = $( "#myid" ).val();
  $(".mostrar").html( "<b>and_or:</b> " + singleValues + "<br> <b>Multiple:</b> " + multipleValues);
}

$("select").change(displayVals);
displayVals();
</script>

Saludos. Votos: 2 - Link respuesta

Txema Artzain Karma: 3097

Fecha: 30-11-2017 10:43:43 Del código anterior, me falta el condicional donde dices:
3. Si el usuario vuelve a seleccionar la casilla de "Ninguno" entonces las opciones que ya habia seleccionado deben desmarcarse y no podran mostrarse en el span, por supuesto la opcion "Y/O" del primer select tampoco debe aparecer.

(if (multipleValues == "Ninguno")

Así que corrijo el JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function displayVals() {
  var singleValues = $("#and_or").val();
  var multipleValues = $( "#myid" ).val() || [];
  if (multipleValues == "Ninguno"){
      $(".mostrar").html( "<b>Multiple:</b> " + multipleValues);
  } else {
      $(".mostrar").html( "<b>and_or:</b> " + singleValues + "<br> <b>Multiple:</b> " + multipleValues);
  }
}
$("select").change(displayVals);
displayVals();
</script>

Votos: 2 - Link respuesta

0

Roland Flores Karma: 58

Fecha: 30-11-2017 12:08:44 Probé pero me sigue apareciendo la opción "Ninguno" cuando selecciono cualquiera de las otras opciones. Lo que me gustaría es que:
1.Cuando seleccione alguna otra opción como "Amarillo, Azul o Rojo" la opción de "Ninguno" se desmarque, de forma automática. No quiero que se vuelva "disabled" sino que simplemente se desmarque, que no se refleje como seleccionada.
2. Si vuelvo a seleccionar la opción "Ninguno" entonces las opciones que ya tenia seleccionadas (Amarillo, Azul ó Rojo) se desmarquen, es decir que ya no aparezcan como seleccionadas.

He intentado probando algunas formas de hacerlo pero nada. No se si es cuestion del Framework que estoy utilizando (MaterializeCss). Alguna sugerencia que podria aplicar? Llevo tiempo buscando la solución a este problema pero nada. Votos: 0 - Link respuesta

Txema Artzain Karma: 3097

Fecha: 30-11-2017 13:23:18 Te envío el código de la página completa, ya probado lo que quieres.

Puedes copiarla y abrirla con cualquier enavegador.

<html lang="es">
<head>
  <meta charset="utf-8">
  <title>JQuery option value</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="row">
    <div class="colores">
      <select id="myid" multiple>
        <option selected>Ninguno</option>
        <option> Amarillo</option>
        <option>Azul</option>
        <option>Rojo</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="elegir">
      <select id="and_or">
        <option selected>Y</option>
        <option>O</option>
      </select>
    </div>
  </div>
  <div class="row">
    <span class="mostrar"></span>
  <div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function displayVals() {
  var singleValues = $("#and_or").val();
  var multipleValues = $( "#myid" ).val() || [];
  if (multipleValues == "Ninguno"){
      $(".mostrar").html( "<b>Multiple:</b> " + multipleValues);
  } else {
      $(".mostrar").html( "<b>and_or:</b> " + singleValues + "<br> <b>Multiple:</b> " + multipleValues);
  }
}
$("select").change(displayVals);
displayVals();
</script>
 
</body>
</html>

Votos: 1 - Link respuesta

Walter Sánchez Karma: 6576

Fecha: 30-11-2017 16:23:47 Hola
Sumo mi aporte como alternativo a los que ya han expuesto
Dejo la solucion que he podido realizar.

1- Al seleccionar los colores y luego se selecciona la opción ninguno, se deseleccionan los colores.
2- Al seleccionar los colores no permite seleccionar la opción ninguno.

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Jquery multiselected</title>
    <!-- Jquery 3.2.1  -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#opciones').change(function () {
                $.each($(this).val(), function(i, val){
                    // val es wl valor de la opcion selecionada
                    if(val=='Ninuguno'){ // si selecion Ninguno desmarca al resto de las opciones
                        $("#opciones option[value='Amarillo'],[value='Azul'],[value='Rojo']").prop("selected", false);
                        $("#opciones option[value='Ninuguno']").prop("selected", true);
                    }else{
                        // si se lecciona culauquier opcion que no sea Ninguno
                        $("#opciones option[value='Ninuguno']").prop("selected", false);
                        switch (val) {
                            case 'Amarillo':
                                $("#opciones option[value='Amarillo']").prop("selected", true);
                                break;
                            case 'Azul':
                                $("#opciones option[value='Azul']").prop("selected", true);
                                break;
                            case 'Rojo':
                                $("#opciones option[value='Rojo']").prop("selected", true);
                                break;
                        }

                    }
                });
            });

        })
    </script>
</head>
<body>
<select id="opciones" multiple="multiple" >
    <option value="Ninuguno" selected>Ninuguno</option>
    <option value="Amarillo">Amarillo</option>
    <option value="Azul">Azul</option>
    <option value="Rojo">Rojo</option>
</select>
</body>
</html>

Espero que sirva a modo de ejemplo, seguramente que alguien con más conocimientos lo podría mejorar.

Saludos Votos: 0 - Link respuesta

0

Roland Flores Karma: 58

Fecha: 30-11-2017 18:48:49 Gracias por sus aportes a la solución de mi problema. Veran, aun me sigue dejando seleccionada la casilla de "Ninguno" cuando selecciono algun color de la lista. Yo estoy usando un framework llamado Materializecss, digamos que ese framework trabaja por medio de plugins, cuando se crea un elemento select, por medio de JQuery el framework agrega otros elementos que van asociados a ese select: agrega un input text, un <ul> y unos elementos <li>, y aparte tambien crea inputs tipo checkboxs, todo se agrega en el momento que creamos un "select", la cuestion es que, por lo que veo, modificar unicamente el estado (selected, true) (selected, false) no es suficiente porque las casillas de seleccion igual quedan marcadas.

este codigo, contiene las referencias al framework Materializecss

<!DOCTYPE html>
<html>
<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 Multiple</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>

<br>
<br>
<br>

<div class="row">
<div class="mostrar">
<span>COLORES SELECCIONADOS: </span><span class="valor"></span>
</div>
</div>

<div class="row">
<div class="col s4">
<select id="and_or">
<option selected>Y</option>
<option>O</option>
</select>
</div>
</div>

<br>
<br>
<div class="row">
<div class="col s4">
<select id="myid" multiple="multiple">
<option value="Ninguno" 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('.valor').innerHTML = selectValue.join( " " + valorSelect1 );
$('.valor').html(selectValue.join( " " + valorSelect1));
}

$( "select" ).change( displayValores );
displayValores();

</script>

</body>
</html>

He ideado varias opciones, y he tomado en consideracion las propuestas que me han proporcionado pero sigue quedando marcada la casilla "Ninguno" y lo que realmente deseo es que se desmarque de forma automatica cuando yo elija a algunas opciones como Amarillo, Azul o Rojo; y si selecciono "Ninguno" nuevamente entonces que se desmarquen las opciones que tenia seleccionadas. No se si me explique bien... Votos: 0 - Link respuesta
2

Txema Artzain Karma: 3097

Fecha: 30-11-2017 23:48:50 Prueba las sentencias de JQuery para desmarcar las opciones, siempre dentro del condicional if () y elseif()

$("#myid").val([]);
$("#myid option:selected").prop("selected", false);
$("#myid option:selected").removeAttr("selected");

Dede JQuery no conozco otras opciones.
No puedo ayudar más al desconocer cómo actúan los plugins.

Por otra parte, ten en cuenta que estás con una versión alfa de Materialize v1.0.0-alpha.1 (previa a la beta, propia para las pruebas previas a las versiones estables). Votos: 2 - Link respuesta
0

Roland Flores Karma: 58

Fecha: 01-12-2017 09:04:10 Hola, tome tu sugerencia y probé descargando el paquete completo de materialize y además implemente las sentencias de JQuery que me indicaste, y si se refleja el cambio a nivel del span, es decir, cuando selecciono algun color, en el span se quita la opcion "Ninguno" pero en las opciones del select aun me queda marcada la casilla de "Ninguno". Si la desmarco manualmente y luego vuelvo a marcarla entonces me aparece "Ninguno" junto con los colores que tengo seleccionado, es decir los colores no se desmarcan. Investigando un poco eso de los plugins me di cuenta de algo: Cuando agregue el select, por medio del plugin de JQuery se creó el siguiente codigo:

<div class="select-wrapper">
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data target="select-options-84551906-29c6-d025-f0e3-c6dae54fa6b">
<ul id="select-options-84551906-29c6-d025-f0e3-c6dae54fa6b" class="dropdown-content select-dropdown multiple-select-dropdown" tabindex="0" style>
<li tabindex="0" class="Selected active">
<span>
<label><input type="checkbox"><span>Ninguno</span>
</label>
</span>
</li>
<li tabindex="0" class>
<span>
<label><input type="checkbox"><span>Amarillo</span>
</label>
</span>
</li>
<li tabindex="0" class>
<span>
<label><input type="checkbox"><span>Azul</span>
</label>
</span>
</li>
<li tabindex="0" class>
<span>
<label><input type="checkbox"><span>Rojo</span>
</label>
</span>
</li>
</ul>
<select id="myid" multiple="multiple">
<option value="Ninguno" selected>Ninguno</option>
<option value="Amarillo">Amarillo</option>
<option value="Azul">Azul</option>
<option value="Rojo">Rojo</option>
</select>
</div>
no se si en lugar de jugar con el selected del option, tenga que manipular el selected del elemento <li>... Votos: 0 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Con JQuery: Cómo puedo desmarcar un <option> de un select multiple cuando seleccione otra opcion de ese mismo select? framework utilizado: Materializecss[No resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta