0

Hola tengo un <select> en el cual cada <option> genera un texto. Lo que quiero realizar es que al seleccionar otra opción ya no salga la anterior, que solo salga una.

Por ejemplo: Si selecciono la opción 1 aparecerá "UNO", luego si selecciono la opción 3 aparecerá el "UNO" generado anteriormente y "TRES", entonces cuando pase esto quiero que el "UNO" ya no aparezca.

$(document).ready(function() {
  var $mensajeUno = $(
    '<h1>UNO</h1>'
  );
  var $mensajeDos = $(
    '<h1>DOS</h1>'
  );
  var $mensajeTres = $(
    '<h1>TRES</h1>'
  );
  var $mensajeCuatro = $(
    '<h1>CUATRO</h1>'
  );

  $("#select_num").on("change", function() {
    var seleccion = $(this).val();
    switch (seleccion) {
      case '1':
        $('#mensajeUno').append($mensajeUno);
        break;
      case '2':
        $('#mensajeDos').append($mensajeDos);
        break;
      case '3':
        $('#mensajeTres').append($mensajeTres);
        break;
      case '4':
        $('#mensajeCuatro').append($mensajeCuatro);
        break;
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="select_num">
  <option value=''>Seleccione...</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
</select>
<div id="mensajeUno"></div>
<div id="mensajeDos"></div>
<div id="mensajeTres"></div>
<div id="mensajeCuatro"></div>

3
  • Es necesario que cada elemento tenga su propio ID? (div id="mensajeUno") porque se puede hacer de una forma dinamica Commented el 13 ene. 2021 a las 12:42
  • @JuanRivera Hola, ya lo resolví y de manera más dinámica y comprensible, cuando tenga tiempo detallo la respuesta
    – Javier
    Commented el 13 ene. 2021 a las 13:08
  • La opción más fácil es deshabilitar directamente la opción: $("#select_num option:selected").attr('disabled','disabled');
    – Triby
    Commented el 13 ene. 2021 a las 16:30

1 respuesta 1

0

Cambié $(document).ready(function() {} por $(document).on('change', '#select_num', function() {} debido a que éste ultimo es mucho mejor para añadir eventos porque puede "monitorear" la selecciones realizadas sin importar cuando éstas se realicen.

También no tenia sentido tener muchos <div> si tan solo se muestra uno, por esto quedó con un div global <div id="mensaje"></div>.
Para el tema de que no se repita el mensaje, utilicé antes de cada caso $('#mensaje').html(''); lo que hace que cada vez que se vuelva a realizar la función, el mensaje quede vacío.

$(document).on('change', '#select_num', function() {

  var $mensajeUno = $(
    '<h1>UNO</h1>'
  );
  var $mensajeDos = $(
    '<h1>DOS</h1>'
  );
  var $mensajeTres = $(
    '<h1>TRES</h1>'
  );
  var $mensajeCuatro = $(
    '<h1>CUATRO</h1>'
  );
  
  var seleccion = $(this).val();
  $('#mensaje').html('');
  switch (seleccion) {
    case '1':
      $('#mensaje').append($mensajeUno);
      break;
    case '2':
      $('#mensaje').append($mensajeDos);
      break;
    case '3':
      $('#mensaje').append($mensajeTres);
      break;
    case '4':
      $('#mensaje').append($mensajeCuatro);
      break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="select_num">
  <option value=''>Seleccione...</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
</select>
<div id="mensaje"></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.