0

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.

3
  • No se entiende bien. Dices que los selectores no tienen opciones marcadas como "selected" pero en tu código ambos sí tienen. Segundo, en tu función aludes a una opción en #select1 con value=0 que no existe. Creo que si tu código de ejemplo no refleja el caso real, debes editarlo para que al menos cuadre con tu descripción. segundo, no se entiende si lo que muestra el span es el texto del selector 1 o el 2.
    – ffflabs
    Commented el 13 dic. 2017 a las 11:47
  • si, tienes razón voy a editar el codigo, ya me fije que hay unos errores ahi, lo copie mal. Y en el caso de los span...En el codigo hay 2 span, uno tiene una case llamada "resultado" y el otro span tiene una clase llamada "and_or". En el codigo tengo 2 elementos selects, uno es simple y el otro es multiple. Por ejemplo, la primera opción del select multiple: "None" tiene atributo selected, por lo tanto al cargar la pagina me sale reflejado ese texto en el primer span(class=resultado), eso esta bien, las opciones que vaya seleccionando apareceran ahi en ese span.
    – Carmen B.
    Commented el 13 dic. 2017 a las 14:00
  • Ahora bien, el select simple (con id=select1) no tendra en ninguna de sus opciones el atributo selected, cuando el usuario seleccione una de las dos opciones de ese select, es decir: and/or, el texto de esa opcion seleccionada debe aparecer en el segundo span, es decir el que tiene class=and_or. Solo debe aparecer texto en ese span cuando el usuario haga click en una opcion u otra. Voy a editar el codigo para que se pueda ver mejor.
    – Carmen B.
    Commented el 13 dic. 2017 a las 14:05

1 respuesta 1

1

Aquí mi intento de interpretar lo que quieres:

En un principio #select1 está deshabilitado. #select2 no tiene opciones seleccionadas.

Cuando cambian las opciones seleccionadas de #select2 puede ocurrir lo siguiente:

  1. Si no hay opciones seleccionadas, se eliminan los textos y #select1 queda disabled
  2. Si hay opciones seleccionadas, pero incluyen "None", se eliminan los textos y #select1 queda disabled
  3. En otro caso, #select1 queda habilitado, el texto de su opción activa llena el div .and_or y la concatenación de los textos de #select2 llena el div .resultado.

Si #select1 está habilitado y el usuario cambia la selección, se actualiza el valor de .and_or

NOTA si quieres que .and_or no tenga texto hasta que el usuario cambie #select1, tendrías que añadirle un primer elemento option con valor 0 y texto vacío.

function displayValues () {
  var select2Values = $("#select2").val() || []; 
  
  if(select2Values.length===0 || select2Values[0]=="0") {
     $("#select1").attr('disabled', 'disabled');
     $('.resultado').empty();
     $('.and_or').empty();
  } else {
     var select2Texts = $("#select2 option:selected")
     .map(function() {
         return $(this).text();
     }).get();
     $("#select1").removeAttr('disabled');
     $('.and_or').text($("#select1").find("option:selected").text());
     $('.resultado').text(select2Texts.join(", "));
     
  }
}

//User Changes. 
$(document).ready (function() {
  $("#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>

    
    <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">None</option>
          <option value="1">light</option>
          <option value="2">Moderate</option>
          <option value="3">Many</option>
        </select>
      </div>
   </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.