0

Tengo un select con 4 option, al llenar todos los option muestra la información de una BD, quisiera que al volver a dar clic en un select la información se oculte, seleccione otro option y muestre la información de ese option, claro cada select ya trae su información.

$(document).ready(function(){
   $("#compania_input").click(function(){
     $("#idPeriodoTitulo").hide();
     $("#tabsHeader").hide();
     $("#tabsDetail").hide();
   });
});

He hecho esto, pero ya no me muestra información por que los campos están ocultos, es lo que se me ocurrió hacer, pero quisiera que se vieran dependiendo de la selección del select.

Espero me haya dado a entender.

Gracias!

1
  • 1
    Deberias agregar tu HTML
    – alanfcm
    Commented el 8 jul. 2019 a las 15:22

1 respuesta 1

0

Podrías adaptar este ejemplo a tus necesidades:

// array de objetos con propiedades para las options
const $options = [
  { value: 'a', html: 'value a' },
  { value: 'b', html: 'value b' },
  { value: 'c', html: 'value c' },
  { value: 'd', html: 'value d' }
]

// target select
const $select = $('#my-select')

/**
 * inicialización del DOM cuando ha sido renderizado
 * 
 */
$(document).ready(function () {
  // agrega al select las options
  appendOptionsToSelect($options)

  // oculta la primera option porque viene seleccionada por defecto
  setOptionsToDisplay($options[0].value)

  // inicializa el listener del select cada vez que cambia de valor
  initSelectListener()
})

/**
 * limpia la propiedad display de todas las options y setea display: none
 * a la option con el value recibido 
 * 
 * @param {number} value 
 */
function setOptionsToDisplay(value) {
  $select.find('option').css('display', '')
  $select.find(`option[value="${value}"]`).css('display', 'none')
}

/**
 * recibe el array de options y las inserta en el select
 * 
 * @param {array} options 
 */
function appendOptionsToSelect(options) {
  let html = ''
  options.forEach(option =>
    html += `
          <option value="${option.value}">
            ${option.html}
          </option>
      `
  )
  $select.append(html)
}

/**
 * inicializa el listener para el select cada vez que cambie el valor de una option
 * 
 */
function initSelectListener() {
  $select.change(function () {
    setOptionsToDisplay(this.value)
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="my-select">
    </select>

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.