Skip to main content
2 de 2
correcciones de codigo, se borró y agregó nuevas lineas de codigo. Correcciones de gramaticales
Carmen B.
  • 473
  • 1
  • 13
  • 28

Cómo puedo mostrar u ocultar el texto de un select simple al seleccionar opciones de otro select (multiple)?

Hola comunidad stackoverflow en español. Veran, tengo varios select simples y multiples en mi formulario, los cuales estan relacionados unos con otros. Lo que quiero es que se me muestre en un span la opcion seleccionada de un select simple pero solo cuando el usuario clickee en alguna opción. Las etiquetas options de ese select no tienen el atributo selected, pero sin embargo al cargar la pagina me sale en el span el texto de la primera opción de ese select y no quiero eso. Solo deseo que me aparezca el texto(no el value) de la opción que seleccione el usuario, ya que es posible que al final el usuario no seleccione ninguna opción entonces seria raro que sin seleccionar alguna opción siempre este ese texto allí. El problema esta en que, al principio las opciones de mi select estan deshabilitadas y cuando se hace click en las opciones de un select multiple, las opciones del primer select(el select simple) se habilitan. tal vez es un tanto confuso pero mostrare a continuación el código que poseo (que he podido lograr gracias a ayudas de personas de este foro) para explicar mejor lo que deseo lograr

var none = true;
function displayValues () {
  var select2Values = $("#select2").val() || []; 
  var select2Texts = $("#select2 option:selected").map(function() {
                  return $(this).text();
                                }).get();
   
  var select_and_or = $("#select1").find("option:selected").text();
  if (none && (select2Values.length > 1 || select2Values[0] != "0")) {
     
    $("#select2 option[value=0]").removeAttr("selected");
    
    $("#select1").removeAttr('disabled');
     
    select2Values = $("#select2").val()
    
    $('.resultado').css("font-weight", " bold");
    select2Texts = $("#select2 option:selected").map(function() {
                  return $(this).text();
                                }).get();
        none = false;
        
  } 

  else if (!none && select2Values.indexOf("0") > -1) {
     
    $("#select1").attr('disabled', 'disabled');
    $("#select2").val("0");
    
    select2Values = $("#select2").val()
    //Upload the new text selected
    $('.resultado').css("font-weight", "normal");
    select2Texts = $("#select2 option:selected").map(function() {
                  return $(this).text();
                                }).get();
    none = true;
  }

  document.querySelector('.resultado').innerHTML = select2Texts.join(", ");
  $('.resultado').html(select2Texts.join(", "));
  $('.and_or').html(select_and_or);

}
//User Changes. 
$("#select2").change(displayValues);
$('#select1').change(displayValues);
displayValues();
.resultado {
  margin-left: 40px;
}

.and_or {
  margin-left: 40px;
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    </head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready (function() {
      $('select').select();
    });
    
    </script>
    
    <div><span class="resultado"></span><span class="and_or"></span></div>
      <br>
    <div class="row">
        <div class="col s3 offset-s6">
          <select id="select1" disabled>
            <option value="4">and</option>
            <option value="5">or</option>
          </select>
        </div>
    </div>
    
<div class="row">
      <div class="col s6 offset-s4">
        <select id="select2" multiple class="selector">
          <option value="0" selected>None</option>
          <option value="1">light</option>
          <option value="2">Moderate</option>
          <option value="3">Many</option>
        </select>
      </div>
   </div>

Lo que hace el codigo es: en el select multiple, cuando se selecciona algo distinto a "None" el select simple se habilita y cuando se selecciona "None" entonces el select simple se desabilita. Lo que deseo es que, al estar habilitado el select simple el usuario pueda seleccionar una opción y el texto aparezca en el span con clase "and_or" pero solo si el usuario selecciona una opción, antes no debe aparecer nada de texto en ese span. Si el usuario ha seleccionado alguna de las opciones "and/or" y luego selecciona "None" en el select multiple, automaticamente el select simple se deshabilita entonces quiero que el texto de la opción seleccionada "and/or" que aparecía en el span ya no debe aparecer más. No se si me explique bien? Es una cuestion de mostrar o no el texto de la opción seleccionada "and/or". El texto de las opciones seleccionadas del select multiple obviamente siempre debe aparecer desde el inicio. Con ese select no hay problema, la cuestion esta en el select simple, que no logro que el texto no me aparezca hasta tanto el usuario seleccione una opción y que desaparezca cuando el select quede deshabilitado. Alguien podria ayudarme a resolver esto usando Javascript/jquery? La idea es que todo se haga de forma dinamica. El framework que uso es materializecss aunque en este ejemplo no he colocado las librerias.

Carmen B.
  • 473
  • 1
  • 13
  • 28