3

Tengo este select, en el cual los option que están en disabled son las CATEGORÍAS y dentro de esas categorías hay una letra con número. En este select las tengo ordenadas pero me pidieron que cuando seleccione una de esas categorías, en otro select me salgan las características de esa categoría. Por ejemplo, cuando seleccione CONDUCTAL, me saliera todas las características de ese conductal en otro select, o sea C1, C2, C3, C4, C5, C6. Y así con todas.

Éste es el código que tengo hasta el momento:

<select class="txtFormulario_PreguntaCategoria" id="txtFormulario_PreguntaCategoria_' + val.idPre + '">
  <option disabled selected></option>
  <option disabled>CONDUCTAL</option>
  <option value="C1">C1</option>
  <option value="C2">C2</option>
  <option value="C3">C3</option>
  <option value="C4">C4</option>
  <option value="C5">C5</option>
  <option value="C6">C6</option>

  <option value="" disabled>ESTRUCTURAL</option>
  <option value="S1">S1</option>
  <option value="S2">S2</option>
  <option value="S3">S3</option>
  <option value="S4">S4</option>
  <option value="S5">S5</option>
  <option value="S6">S6</option>

  <option value="" disabled>ORGANIZATIVA</option>
  <option value="01">01</option>
  <option value="02">O2</option>
  <option value="03">O3</option>
  <option value="04">O4</option>
  <option value="05">O5</option>
  <option value="06">O6</option>
  <option value="07">O7</option>
  <option value="08">O8</option>
  <option value="09">O9</option>
  <option value="10">10</option>
  <option value="11">11</option>

  <option value="" disabled>OTROS FACTORES</option>
  <option value="AF1">AF1</option>
  <option value="AF2">AF2</option>
  <option value="AF3">AF3</option>
  <option value="AF4">AF4</option>
</select>

2
  • 1
    No relacionado con la pregunta en sí: los nombres de categorías que pones como opciones disabled deberías ponerlos como optgroup (lo cual sería semánticamente más adecuado).
    – Alvaro Montoro
    el 14 sep. 2018 a las 13:17
  • Relacionado con la pregunta: sería interesante saber si tienes alguna restricción y cómo generas el select.
    – Alvaro Montoro
    el 14 sep. 2018 a las 13:22

2 respuestas 2

5

No se si te referías a esto exactamente.

function filter_options(){
	if (typeof $("#choice1").data('options') === "undefined") {
       $("#choice1").data('options', $('#choice2 option').clone());
  }
    var id = $("#choice1").val();
    var options = $("#choice1").data('options').filter('[data-option=' + id + ']');
    $('#choice2').html(options);
}

$(function () {
		//Ejecutar el filtro la primera vez
		filter_options();
    
    //actualizar al cambiar el factor
    $("#choice1").change(function () {
	    filter_options();
		});
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="choice1">
 <option value="S">ESTRUCTURAL</option>
 <option   value="O">ORGANIZATIVA</option>
 <option  value="AF"  >OTROS FACTORES</option>
</select>

<select class="form-control" id="choice2">
  <option data-option="S"    value="S1">S1</option>
  <option data-option="S"    value="S2">S2</option>
  <option data-option="S"    value="S3">S3</option>
  <option data-option="S"   value="S4">S4</option>
  <option data-option="S"    value="S5">S5</option>
  <option data-option="S"   value="S6">S6</option>
  <option data-option="O"   value="01">01</option>
  <option data-option="O"   value="02">O2</option>
  <option data-option="O"    value="03">O3</option>
  <option data-option="O"   value="04">O4</option>
  <option data-option="O"   value="05">O5</option>
  <option data-option="O"  value="06">O6</option>
  <option data-option="O"   value="07">O7</option>
  <option data-option="O"    value="08">O8</option>
  <option data-option="O"    value="09">O9</option>
  <option data-option="O"   value="10">10</option>
  <option data-option="O"   value="11">11</option>
  <option data-option="AF"    value="AF1">AF1</option>
  <option data-option="AF"   value="AF2">AF2</option>
  <option data-option="AF"    value="AF3">AF3</option>
  <option data-option="AF"   value="AF4">AF4</option>
</select>

Lo cual serían dos select, según lo que selecciones en el primero (las cabeceras) te aparecen las opciones correspondientes.

4
  • Gracias por editar la respuesta. Ahora se ve mucho mejor. Por cierto, si completas el recorrido de bienvenida aprenderás más sobre el funcionamiento básico del sitio y ganarás tu primera medalla. Bienvenido al sitio.
    – Alvaro Montoro
    el 14 sep. 2018 a las 13:17
  • Gracias a ti por el comentario! el 14 sep. 2018 a las 13:23
  • Muchisimas gracias amigos el ejemplo que me hizo el amigo es exacto lo que necesitaba gracias muchisimas gracias el 14 sep. 2018 a las 13:33
  • @PlayTutoAlvarez si esta respuesta resolvió tu problema, márcala como aceptada pulsando en la marca que hay en la parte superior izquierda de la misma.
    – Alvaro Montoro
    el 14 sep. 2018 a las 13:39
1

Ya tienes una solución que vale, voy a poner una alternativa que funcionará aunque no es ideal. Podrías usar datalist para tener los valores ordenados y cuando se seleccione una opción en el select, actualizar el valor de la lista para que los valores cambien.

Esta opción no es ideal por varios motivos:

  • Asume que los usuarios van a conocer los valores de las opciones (si hay muchos, no se van a mostrar todos como se haría en un select).
  • No está soportado por todos los navegadores (fuente).
  • datalist es una lista de sugerencias, pero los usuarios podrían introducir un valor no sugerido (con un select se fuerza a que los valores sean los especificados).

Aquí puedes ver un ejemplo funcionando (uso JavaScript puro porque no indicaste si usabas jQuery u otra biblioteca):

document.querySelector("#txtFormulario_PreguntaCategoria").addEventListener("change", function() {
  let valores  = document.querySelector("#txtFormulario_PreguntaCategoriaValores");
  valores.setAttribute("list", this.value);
  valores.removeAttribute("disabled");
});
<datalist id="conductal">
  <option value="C1">C1</option>
  <option value="C2">C2</option>
  <option value="C3">C3</option>
  <option value="C4">C4</option>
  <option value="C5">C5</option>
  <option value="C6">C6</option>
</datalist>

<datalist id="estructural">
  <option value="S1">S1</option>
  <option value="S2">S2</option>
  <option value="S3">S3</option>
  <option value="S4">S4</option>
  <option value="S5">S5</option>
  <option value="S6">S6</option>
</datalist>

<datalist id="organizativa">
  <option value="01">O1</option>
  <option value="02">O2</option>
  <option value="03">O3</option>
  <option value="04">O4</option>
  <option value="05">O5</option>
  <option value="06">O6</option>
  <option value="07">O7</option>
  <option value="08">O8</option>
  <option value="09">O9</option>
  <option value="10">10</option>
  <option value="11">11</option>
</datalist>

<datalist id="otros">
  <option value="AF1">AF1</option>
  <option value="AF2">AF2</option>
  <option value="AF3">AF3</option>
  <option value="AF4">AF4</option>
</datalist>

<select class="txtFormulario_PreguntaCategoria" id="txtFormulario_PreguntaCategoria">
  <option disabled selected>Selecciona una opción</option>
  <option value="conductal">CONDUCTAL</option>
  <option value="estructural">ESTRUCTURAL</option>
  <option value="organizativa">ORGANIZATIVA</option>
  <option value="otros">OTROS FACTORES</option>
</select>

<input id="txtFormulario_PreguntaCategoriaValores" list="" disabled />

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.