Create a select depending on the selected value in another

Question

Create a select depending on the selected value in another

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

I have this select , in which the option that are in disabled are the CATEGORIES and within those categories there is a letter with number. In this select I have ordered them but they asked me that when I select one of those categories, in another select I get the characteristics of that category. For example, when I selected CONDUCTAL, all the characteristics of that behavior would come out in another select , that is, C1, C2, C3, C4, C5, C6. And so with all.

This is the code I have so far:

<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>

javascript html5 html

asked by PlayTutoAlvarez 14.09.2018 в 14:40

source

2 answers

Get text within annotated tags using BeautifulSoup Center controls within a maximized form

score 4 · Answer 1

I do not know if you meant exactly this.

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>

Which would be two selections, depending on what you select in the first one (the headers), the corresponding options appear.

score 1 · Answer 2

You already have a solution that is worth, I'm going to put an alternative that will work even though is not ideal . You could use datalist to have the values sorted and when an option is selected in the select, update the value of the list so that the values change.

This option is not ideal for several reasons:

Assume that users will know the values of the options (if there are many, they will not all be shown as they would be in a select ).
Not supported by all browsers ( source ).
datalist is a list of suggestions, but users could enter a non-suggested value (with a select the values are forced to be specified).

Here you can see a working example (pure JavaScript use because you did not indicate if you used jQuery or another library):

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 />