javascript - una - listas desplegables en html y css
Mostrar un segundo menú desplegable basado en la selección desplegable anterior (4)
Mi solución y consejo sería usar AJAX. Si tiene muchas opciones y para cada una muchas otras opciones, no tiene sentido cargarlas todas instantáneamente. La idea es enviar una solicitud de AJAX y actualizar la segunda con las opciones adecuadas. También puede almacenar el texto adecuado para cada opción en la base de datos ... de esta manera, tiene todo lo que desea y no obliga al usuario a descargar selecciones innecesarias
En primer lugar, odio mencionar un problema que ya se ha tratado, pero debes saber que las otras opciones que he encontrado en este sitio no me funcionan.
Básicamente, quiero construir un formulario corto donde haya dos cuadros desplegables. El primero siempre se muestra, el segundo está oculto por defecto. Cuando se selecciona una determinada opción en el primer cuadro desplegable, quiero que aparezca el segundo cuadro desplegable. Este es un ejemplo perfecto de lo que quiero decir:
SIN EMBARGO, a diferencia del ejemplo anterior, tengo un conjunto separado de opciones para mostrar en el cuadro desplegable de CADA opción seleccionada en el primer cuadro desplegable, y no solo para una de las opciones. En otras palabras, en el ejemplo anterior, si selecciona "China", aparecerá el segundo cuadro desplegable, pero si selecciona algo más, permanecerá oculto. Eso no es lo que quiero. Quiero que aparezca un menú desplegable diferente si seleccionó "Taiwán" y, sin embargo, un menú desplegable diferente para mostrar si seleccionó "Alemania", etc. para cada opción. Intenté simplemente duplicar el javascript en ese ejemplo para cada opción, cambiando las etiquetas de nombre en consecuencia, pero eso no funcionó (soy un novato cuando se trata de Javascript).
Así que encontré este ejemplo, que es exactamente el tipo de cosa que estoy buscando:
Sin embargo, por alguna razón, este código no parece funcionar para mí. No tiene ningún efecto en absoluto; el segundo menú desplegable simplemente permanece oculto independientemente de lo que se seleccione. Mis listas desplegables son mucho más numerosas y largas que la del ejemplo anterior. Aquí está el HTML que tengo ahora:
Dropdown 1
<div class="ccms_form_element cfdiv_custom" id="style_container_div">
<label>Choose Rank: </label><select size="1" id="Rank" class=" validate[''required'']" title="" type="select" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="Airman">Airman</option>
<option value="Airman First Class">Airman First Class</option>
<option value="Senior Airman">Senior Airman</option>
<option value="Staff Sergeant">Staff Sergeant</option>
<option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select><div class="clear"></div><div id="error-message-style"></div></div>
Dropdown 2:
<div id="Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Which Job? </label>
<select id="Airman" name="Airman">
<option value="">-Choose A Job-</option>
<option value="Basic Ore Miner - Level 1a">Basic Ore Miner - Level 1</option>
<option value="Basic Ore Miner - Level 2a">Basic Ore Miner - Level 2</option>
<option value="Basic Ore Miner - Level 3a">Basic Ore Miner - Level 3</option>
<option value="Basic Ore Miner - Level 4a">Basic Ore Miner - Level 4</option>
<option value="Basic Ore Miner - Level 5a">Basic Ore Miner - Level 5</option>
<option value="Basic Ore Miner - Level 6a">Basic Ore Miner - Level 6</option>
<option value="Basic Ore Miner - Level 7a">Basic Ore Miner - Level 7</option>
<option value="Plagioclase Miner - Level 1a">Plagioclase Miner - Level 1</option>
<option value="Plagioclase Miner - Level 2a">Plagioclase Miner - Level 2</option>
<option value="Plagioclase Miner - Level 3a">Plagioclase Miner - Level 3</option>
<option value="Plagioclase Miner - Level 4a">Plagioclase Miner - Level 4</option>
<option value="Plagioclase Miner - Level 5a">Plagioclase Miner - Level 5</option>
<option value="Plagioclase Miner - Level 6a">Plagioclase Miner - Level 6</option>
<option value="Plagioclase Miner - Level 7a">Plagioclase Miner - Level 7</option>
<option value="Omber Miner - Level 1a">Omber Miner - Level 1</option>
<option value="Omber Miner - Level 2a">Omber Miner - Level 2</option>
<option value="Omber Miner - Level 3a">Omber Miner - Level 3</option>
<option value="Omber Miner - Level 4a">Omber Miner - Level 4</option>
<option value="Omber Miner - Level 5a">Omber Miner - Level 5</option>
<option value="Omber Miner - Level 6a">Omber Miner - Level 6</option>
<option value="Omber Miner - Level 7a">Omber Miner - Level 7</option>
<option value="lvl-1 Mission Runner - Level 1a">lvl-1 Mission Runner - Level 1</option>
<option value="lvl-1 Mission Runner - Level 2a">lvl-1 Mission Runner - Level 2</option>
<option value="lvl-1 Mission Runner - Level 3a">lvl-1 Mission Runner - Level 3</option>
<option value="lvl-1 Mission Runner - Level 4a">lvl-1 Mission Runner - Level 4</option>
<option value="lvl-1 Mission Runner - Level 5a">lvl-1 Mission Runner - Level 5</option>
<option value="lvl-1 Mission Runner - Level 6a">lvl-1 Mission Runner - Level 6</option>
<option value="lvl-1 Mission Runner - Level 7a">lvl-1 Mission Runner - Level 7</option>
<option value="lvl-2 Mission Runner - Level 1a">lvl-2 Mission Runner - Level 1</option>
<option value="lvl-2 Mission Runner - Level 2a">lvl-2 Mission Runner - Level 2</option>
<option value="lvl-2 Mission Runner - Level 3a">lvl-2 Mission Runner - Level 3</option>
<option value="lvl-2 Mission Runner - Level 4a">lvl-2 Mission Runner - Level 4</option>
<option value="lvl-2 Mission Runner - Level 5a">lvl-2 Mission Runner - Level 5</option>
<option value="lvl-2 Mission Runner - Level 6a">lvl-2 Mission Runner - Level 6</option>
<option value="lvl-2 Mission Runner - Level 7a">lvl-2 Mission Runner - Level 7</option>
<option value="lvl-3 Mission Runner - Level 1a">lvl-3 Mission Runner - Level 1</option>
<option value="lvl-3 Mission Runner - Level 2a">lvl-3 Mission Runner - Level 2</option>
<option value="lvl-3 Mission Runner - Level 3a">lvl-3 Mission Runner - Level 3</option>
<option value="lvl-3 Mission Runner - Level 4a">lvl-3 Mission Runner - Level 4</option>
<option value="lvl-3 Mission Runner - Level 5a">lvl-3 Mission Runner - Level 5</option>
<option value="lvl-3 Mission Runner - Level 6a">lvl-3 Mission Runner - Level 6</option>
<option value="lvl-3 Mission Runner - Level 7a">lvl-3 Mission Runner - Level 7</option>
<option value="lvl-4 Mission Runner - Level 1a">lvl-4 Mission Runner - Level 1</option>
<option value="lvl-4 Mission Runner - Level 2a">lvl-4 Mission Runner - Level 2</option>
<option value="lvl-4 Mission Runner - Level 3a">lvl-4 Mission Runner - Level 3</option>
<option value="lvl-4 Mission Runner - Level 4a">lvl-4 Mission Runner - Level 4</option>
<option value="lvl-4 Mission Runner - Level 5a">lvl-4 Mission Runner - Level 5</option>
<option value="lvl-4 Mission Runner - Level 6a">lvl-4 Mission Runner - Level 6</option>
<option value="lvl-4 Mission Runner - Level 7a">lvl-4 Mission Runner - Level 7</option>
</select>
</div>
<div id="Airman First Class" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Which Job? </label>
<select id="Airman First Class" name="Airman First Class">
<option value="">-Choose A Job-</option>
<option value="Basic Ore Miner - Level 1b">Basic Ore Miner - Level 1</option>
<option value="Basic Ore Miner - Level 2b">Basic Ore Miner - Level 2</option>
<option value="Basic Ore Miner - Level 3b">Basic Ore Miner - Level 3</option>
<option value="Basic Ore Miner - Level 4b">Basic Ore Miner - Level 4</option>
<option value="Basic Ore Miner - Level 5b">Basic Ore Miner - Level 5</option>
<option value="Basic Ore Miner - Level 6b">Basic Ore Miner - Level 6</option>
<option value="Basic Ore Miner - Level 7b">Basic Ore Miner - Level 7</option>
<option value="Plagioclase Miner - Level 1b">Plagioclase Miner - Level 1</option>
<option value="Plagioclase Miner - Level 2b">Plagioclase Miner - Level 2</option>
<option value="Plagioclase Miner - Level 3b">Plagioclase Miner - Level 3</option>
<option value="Plagioclase Miner - Level 4b">Plagioclase Miner - Level 4</option>
<option value="Plagioclase Miner - Level 5b">Plagioclase Miner - Level 5</option>
<option value="Plagioclase Miner - Level 6b">Plagioclase Miner - Level 6</option>
<option value="Plagioclase Miner - Level 7b">Plagioclase Miner - Level 7</option>
<option value="Omber Miner - Level 1b">Omber Miner - Level 1</option>
<option value="Omber Miner - Level 2b">Omber Miner - Level 2</option>
<option value="Omber Miner - Level 3b">Omber Miner - Level 3</option>
<option value="Omber Miner - Level 4b">Omber Miner - Level 4</option>
<option value="Omber Miner - Level 5b">Omber Miner - Level 5</option>
<option value="Omber Miner - Level 6b">Omber Miner - Level 6</option>
<option value="Omber Miner - Level 7b">Omber Miner - Level 7</option>
<option value="lvl-1 Mission Runner - Level 1b">lvl-1 Mission Runner - Level 1</option>
<option value="lvl-1 Mission Runner - Level 2b">lvl-1 Mission Runner - Level 2</option>
<option value="lvl-1 Mission Runner - Level 3b">lvl-1 Mission Runner - Level 3</option>
<option value="lvl-1 Mission Runner - Level 4b">lvl-1 Mission Runner - Level 4</option>
<option value="lvl-1 Mission Runner - Level 5b">lvl-1 Mission Runner - Level 5</option>
<option value="lvl-1 Mission Runner - Level 6b">lvl-1 Mission Runner - Level 6</option>
<option value="lvl-1 Mission Runner - Level 7b">lvl-1 Mission Runner - Level 7</option>
<option value="lvl-2 Mission Runner - Level 1b">lvl-2 Mission Runner - Level 1</option>
<option value="lvl-2 Mission Runner - Level 2b">lvl-2 Mission Runner - Level 2</option>
<option value="lvl-2 Mission Runner - Level 3b">lvl-2 Mission Runner - Level 3</option>
<option value="lvl-2 Mission Runner - Level 4b">lvl-2 Mission Runner - Level 4</option>
<option value="lvl-2 Mission Runner - Level 5b">lvl-2 Mission Runner - Level 5</option>
<option value="lvl-2 Mission Runner - Level 6b">lvl-2 Mission Runner - Level 6</option>
<option value="lvl-2 Mission Runner - Level 7b">lvl-2 Mission Runner - Level 7</option>
<option value="lvl-3 Mission Runner - Level 1b">lvl-3 Mission Runner - Level 1</option>
<option value="lvl-3 Mission Runner - Level 2b">lvl-3 Mission Runner - Level 2</option>
<option value="lvl-3 Mission Runner - Level 3b">lvl-3 Mission Runner - Level 3</option>
<option value="lvl-3 Mission Runner - Level 4b">lvl-3 Mission Runner - Level 4</option>
<option value="lvl-3 Mission Runner - Level 5b">lvl-3 Mission Runner - Level 5</option>
<option value="lvl-3 Mission Runner - Level 6b">lvl-3 Mission Runner - Level 6</option>
<option value="lvl-3 Mission Runner - Level 7b">lvl-3 Mission Runner - Level 7</option>
<option value="lvl-4 Mission Runner - Level 1b">lvl-4 Mission Runner - Level 1</option>
<option value="lvl-4 Mission Runner - Level 2b">lvl-4 Mission Runner - Level 2</option>
<option value="lvl-4 Mission Runner - Level 3b">lvl-4 Mission Runner - Level 3</option>
<option value="lvl-4 Mission Runner - Level 4b">lvl-4 Mission Runner - Level 4</option>
<option value="lvl-4 Mission Runner - Level 5b">lvl-4 Mission Runner - Level 5</option>
<option value="lvl-4 Mission Runner - Level 6b">lvl-4 Mission Runner - Level 6</option>
<option value="lvl-4 Mission Runner - Level 7b">lvl-4 Mission Runner - Level 7</option>
</select>
</div>
<div id="Senior Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Which Job? </label>
<select id="Senior Airman" name="Senior Airman">
<option value="">-Choose A Job-</option>
<option value="Basic Ore Miner - Level 1c">Basic Ore Miner - Level 1</option>
<option value="Basic Ore Miner - Level 2c">Basic Ore Miner - Level 2</option>
<option value="Basic Ore Miner - Level 3c">Basic Ore Miner - Level 3</option>
<option value="Basic Ore Miner - Level 4c">Basic Ore Miner - Level 4</option>
<option value="Basic Ore Miner - Level 5c">Basic Ore Miner - Level 5</option>
<option value="Basic Ore Miner - Level 6c">Basic Ore Miner - Level 6</option>
<option value="Basic Ore Miner - Level 7c">Basic Ore Miner - Level 7</option>
<option value="Plagioclase Miner - Level 1c">Plagioclase Miner - Level 1</option>
<option value="Plagioclase Miner - Level 2c">Plagioclase Miner - Level 2</option>
<option value="Plagioclase Miner - Level 3c">Plagioclase Miner - Level 3</option>
<option value="Plagioclase Miner - Level 4c">Plagioclase Miner - Level 4</option>
<option value="Plagioclase Miner - Level 5c">Plagioclase Miner - Level 5</option>
<option value="Plagioclase Miner - Level 6c">Plagioclase Miner - Level 6</option>
<option value="Plagioclase Miner - Level 7c">Plagioclase Miner - Level 7</option>
<option value="Omber Miner - Level 1c">Omber Miner - Level 1</option>
<option value="Omber Miner - Level 2c">Omber Miner - Level 2</option>
<option value="Omber Miner - Level 3c">Omber Miner - Level 3</option>
<option value="Omber Miner - Level 4c">Omber Miner - Level 4</option>
<option value="Omber Miner - Level 5c">Omber Miner - Level 5</option>
<option value="Omber Miner - Level 6c">Omber Miner - Level 6</option>
<option value="Omber Miner - Level 7c">Omber Miner - Level 7</option>
<option value="lvl-1 Mission Runner - Level 1c">lvl-1 Mission Runner - Level 1</option>
<option value="lvl-1 Mission Runner - Level 2c">lvl-1 Mission Runner - Level 2</option>
<option value="lvl-1 Mission Runner - Level 3c">lvl-1 Mission Runner - Level 3</option>
<option value="lvl-1 Mission Runner - Level 4c">lvl-1 Mission Runner - Level 4</option>
<option value="lvl-1 Mission Runner - Level 5c">lvl-1 Mission Runner - Level 5</option>
<option value="lvl-1 Mission Runner - Level 6c">lvl-1 Mission Runner - Level 6</option>
<option value="lvl-1 Mission Runner - Level 7c">lvl-1 Mission Runner - Level 7</option>
<option value="lvl-2 Mission Runner - Level 1c">lvl-2 Mission Runner - Level 1</option>
<option value="lvl-2 Mission Runner - Level 2c">lvl-2 Mission Runner - Level 2</option>
<option value="lvl-2 Mission Runner - Level 3c">lvl-2 Mission Runner - Level 3</option>
<option value="lvl-2 Mission Runner - Level 4c">lvl-2 Mission Runner - Level 4</option>
<option value="lvl-2 Mission Runner - Level 5c">lvl-2 Mission Runner - Level 5</option>
<option value="lvl-2 Mission Runner - Level 6c">lvl-2 Mission Runner - Level 6</option>
<option value="lvl-2 Mission Runner - Level 7c">lvl-2 Mission Runner - Level 7</option>
<option value="lvl-3 Mission Runner - Level 1c">lvl-3 Mission Runner - Level 1</option>
<option value="lvl-3 Mission Runner - Level 2c">lvl-3 Mission Runner - Level 2</option>
<option value="lvl-3 Mission Runner - Level 3c">lvl-3 Mission Runner - Level 3</option>
<option value="lvl-3 Mission Runner - Level 4c">lvl-3 Mission Runner - Level 4</option>
<option value="lvl-3 Mission Runner - Level 5c">lvl-3 Mission Runner - Level 5</option>
<option value="lvl-3 Mission Runner - Level 6c">lvl-3 Mission Runner - Level 6</option>
<option value="lvl-3 Mission Runner - Level 7c">lvl-3 Mission Runner - Level 7</option>
<option value="lvl-4 Mission Runner - Level 1c">lvl-4 Mission Runner - Level 1</option>
<option value="lvl-4 Mission Runner - Level 2c">lvl-4 Mission Runner - Level 2</option>
<option value="lvl-4 Mission Runner - Level 3c">lvl-4 Mission Runner - Level 3</option>
<option value="lvl-4 Mission Runner - Level 4c">lvl-4 Mission Runner - Level 4</option>
<option value="lvl-4 Mission Runner - Level 5c">lvl-4 Mission Runner - Level 5</option>
<option value="lvl-4 Mission Runner - Level 6c">lvl-4 Mission Runner - Level 6</option>
<option value="lvl-4 Mission Runner - Level 7c">lvl-4 Mission Runner - Level 7</option>
</select>
</div>
<div id="Staff Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Which Job? </label>
<select id="Staff Sergeant" name="Staff Sergeant">
<option value="">-Choose A Job-</option>
<option value="Basic Ore Miner - Level 1d">Basic Ore Miner - Level 1</option>
<option value="Basic Ore Miner - Level 2d">Basic Ore Miner - Level 2</option>
<option value="Basic Ore Miner - Level 3d">Basic Ore Miner - Level 3</option>
<option value="Basic Ore Miner - Level 4d">Basic Ore Miner - Level 4</option>
<option value="Basic Ore Miner - Level 5d">Basic Ore Miner - Level 5</option>
<option value="Basic Ore Miner - Level 6d">Basic Ore Miner - Level 6</option>
<option value="Basic Ore Miner - Level 7d">Basic Ore Miner - Level 7</option>
<option value="Plagioclase Miner - Level 1d">Plagioclase Miner - Level 1</option>
<option value="Plagioclase Miner - Level 2d">Plagioclase Miner - Level 2</option>
<option value="Plagioclase Miner - Level 3d">Plagioclase Miner - Level 3</option>
<option value="Plagioclase Miner - Level 4d">Plagioclase Miner - Level 4</option>
<option value="Plagioclase Miner - Level 5d">Plagioclase Miner - Level 5</option>
<option value="Plagioclase Miner - Level 6d">Plagioclase Miner - Level 6</option>
<option value="Plagioclase Miner - Level 7d">Plagioclase Miner - Level 7</option>
<option value="Omber Miner - Level 1d">Omber Miner - Level 1</option>
<option value="Omber Miner - Level 2d">Omber Miner - Level 2</option>
<option value="Omber Miner - Level 3d">Omber Miner - Level 3</option>
<option value="Omber Miner - Level 4d">Omber Miner - Level 4</option>
<option value="Omber Miner - Level 5d">Omber Miner - Level 5</option>
<option value="Omber Miner - Level 6d">Omber Miner - Level 6</option>
<option value="Omber Miner - Level 7d">Omber Miner - Level 7</option>
<option value="lvl-1 Mission Runner - Level 1d">lvl-1 Mission Runner - Level 1</option>
<option value="lvl-1 Mission Runner - Level 2d">lvl-1 Mission Runner - Level 2</option>
<option value="lvl-1 Mission Runner - Level 3d">lvl-1 Mission Runner - Level 3</option>
<option value="lvl-1 Mission Runner - Level 4d">lvl-1 Mission Runner - Level 4</option>
<option value="lvl-1 Mission Runner - Level 5d">lvl-1 Mission Runner - Level 5</option>
<option value="lvl-1 Mission Runner - Level 6d">lvl-1 Mission Runner - Level 6</option>
<option value="lvl-1 Mission Runner - Level 7d">lvl-1 Mission Runner - Level 7</option>
<option value="lvl-2 Mission Runner - Level 1d">lvl-2 Mission Runner - Level 1</option>
<option value="lvl-2 Mission Runner - Level 2d">lvl-2 Mission Runner - Level 2</option>
<option value="lvl-2 Mission Runner - Level 3d">lvl-2 Mission Runner - Level 3</option>
<option value="lvl-2 Mission Runner - Level 4d">lvl-2 Mission Runner - Level 4</option>
<option value="lvl-2 Mission Runner - Level 5d">lvl-2 Mission Runner - Level 5</option>
<option value="lvl-2 Mission Runner - Level 6d">lvl-2 Mission Runner - Level 6</option>
<option value="lvl-2 Mission Runner - Level 7d">lvl-2 Mission Runner - Level 7</option>
<option value="lvl-3 Mission Runner - Level 1d">lvl-3 Mission Runner - Level 1</option>
<option value="lvl-3 Mission Runner - Level 2d">lvl-3 Mission Runner - Level 2</option>
<option value="lvl-3 Mission Runner - Level 3d">lvl-3 Mission Runner - Level 3</option>
<option value="lvl-3 Mission Runner - Level 4d">lvl-3 Mission Runner - Level 4</option>
<option value="lvl-3 Mission Runner - Level 5d">lvl-3 Mission Runner - Level 5</option>
<option value="lvl-3 Mission Runner - Level 6d">lvl-3 Mission Runner - Level 6</option>
<option value="lvl-3 Mission Runner - Level 7d">lvl-3 Mission Runner - Level 7</option>
<option value="lvl-4 Mission Runner - Level 1d">lvl-4 Mission Runner - Level 1</option>
<option value="lvl-4 Mission Runner - Level 2d">lvl-4 Mission Runner - Level 2</option>
<option value="lvl-4 Mission Runner - Level 3d">lvl-4 Mission Runner - Level 3</option>
<option value="lvl-4 Mission Runner - Level 4d">lvl-4 Mission Runner - Level 4</option>
<option value="lvl-4 Mission Runner - Level 5d">lvl-4 Mission Runner - Level 5</option>
<option value="lvl-4 Mission Runner - Level 6d">lvl-4 Mission Runner - Level 6</option>
<option value="lvl-4 Mission Runner - Level 7d">lvl-4 Mission Runner - Level 7</option>
</select>
</div>
<div id="Senior Master Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Which Job? </label>
<select id="Senior Master Sergeant" name="Senior Master Sergeant">
<option value="">-Choose A Job-</option>
<option value="Basic Ore Miner - Level 1e">Basic Ore Miner - Level 1</option>
<option value="Basic Ore Miner - Level 2e">Basic Ore Miner - Level 2</option>
<option value="Basic Ore Miner - Level 3e">Basic Ore Miner - Level 3</option>
<option value="Basic Ore Miner - Level 4e">Basic Ore Miner - Level 4</option>
<option value="Basic Ore Miner - Level 5e">Basic Ore Miner - Level 5</option>
<option value="Basic Ore Miner - Level 6e">Basic Ore Miner - Level 6</option>
<option value="Basic Ore Miner - Level 7e">Basic Ore Miner - Level 7</option>
<option value="Plagioclase Miner - Level 1e">Plagioclase Miner - Level 1</option>
<option value="Plagioclase Miner - Level 2e">Plagioclase Miner - Level 2</option>
<option value="Plagioclase Miner - Level 3e">Plagioclase Miner - Level 3</option>
<option value="Plagioclase Miner - Level 4e">Plagioclase Miner - Level 4</option>
<option value="Plagioclase Miner - Level 5e">Plagioclase Miner - Level 5</option>
<option value="Plagioclase Miner - Level 6e">Plagioclase Miner - Level 6</option>
<option value="Plagioclase Miner - Level 7e">Plagioclase Miner - Level 7</option>
<option value="Omber Miner - Level 1e">Omber Miner - Level 1</option>
<option value="Omber Miner - Level 2e">Omber Miner - Level 2</option>
<option value="Omber Miner - Level 3e">Omber Miner - Level 3</option>
<option value="Omber Miner - Level 4e">Omber Miner - Level 4</option>
<option value="Omber Miner - Level 5e">Omber Miner - Level 5</option>
<option value="Omber Miner - Level 6e">Omber Miner - Level 6</option>
<option value="Omber Miner - Level 7e">Omber Miner - Level 7</option>
<option value="lvl-1 Mission Runner - Level 1e">lvl-1 Mission Runner - Level 1</option>
<option value="lvl-1 Mission Runner - Level 2e">lvl-1 Mission Runner - Level 2</option>
<option value="lvl-1 Mission Runner - Level 3e">lvl-1 Mission Runner - Level 3</option>
<option value="lvl-1 Mission Runner - Level 4e">lvl-1 Mission Runner - Level 4</option>
<option value="lvl-1 Mission Runner - Level 5e">lvl-1 Mission Runner - Level 5</option>
<option value="lvl-1 Mission Runner - Level 6e">lvl-1 Mission Runner - Level 6</option>
<option value="lvl-1 Mission Runner - Level 7e">lvl-1 Mission Runner - Level 7</option>
<option value="lvl-2 Mission Runner - Level 1e">lvl-2 Mission Runner - Level 1</option>
<option value="lvl-2 Mission Runner - Level 2e">lvl-2 Mission Runner - Level 2</option>
<option value="lvl-2 Mission Runner - Level 3e">lvl-2 Mission Runner - Level 3</option>
<option value="lvl-2 Mission Runner - Level 4e">lvl-2 Mission Runner - Level 4</option>
<option value="lvl-2 Mission Runner - Level 5e">lvl-2 Mission Runner - Level 5</option>
<option value="lvl-2 Mission Runner - Level 6e">lvl-2 Mission Runner - Level 6</option>
<option value="lvl-2 Mission Runner - Level 7e">lvl-2 Mission Runner - Level 7</option>
<option value="lvl-3 Mission Runner - Level 1e">lvl-3 Mission Runner - Level 1</option>
<option value="lvl-3 Mission Runner - Level 2e">lvl-3 Mission Runner - Level 2</option>
<option value="lvl-3 Mission Runner - Level 3e">lvl-3 Mission Runner - Level 3</option>
<option value="lvl-3 Mission Runner - Level 4e">lvl-3 Mission Runner - Level 4</option>
<option value="lvl-3 Mission Runner - Level 5e">lvl-3 Mission Runner - Level 5</option>
<option value="lvl-3 Mission Runner - Level 6e">lvl-3 Mission Runner - Level 6</option>
<option value="lvl-3 Mission Runner - Level 7e">lvl-3 Mission Runner - Level 7</option>
<option value="lvl-4 Mission Runner - Level 1e">lvl-4 Mission Runner - Level 1</option>
<option value="lvl-4 Mission Runner - Level 2e">lvl-4 Mission Runner - Level 2</option>
<option value="lvl-4 Mission Runner - Level 3e">lvl-4 Mission Runner - Level 3</option>
<option value="lvl-4 Mission Runner - Level 4e">lvl-4 Mission Runner - Level 4</option>
<option value="lvl-4 Mission Runner - Level 5e">lvl-4 Mission Runner - Level 5</option>
<option value="lvl-4 Mission Runner - Level 6e">lvl-4 Mission Runner - Level 6</option>
<option value="lvl-4 Mission Runner - Level 7e">lvl-4 Mission Runner - Level 7</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div></div>
Como indiqué, ninguno de los códigos javascript en los ejemplos anteriores me funcionan, y soy bastante nuevo en javascript (y tampoco tengo demasiada experiencia en HTML) así que ¿alguna sugerencia?
Además, una vez que el usuario hace una selección en el segundo cuadro desplegable, quiero que se muestre una línea de texto única (es decir, única para su selección) debajo del cuadro desplegable. Aquí hay un ejemplo que encontré:
Alternar un div oculto cuando se selecciona / desactiva una opción desplegable en particular
Sin embargo, nuevamente, a diferencia de este ejemplo, no quiero solo una opción para mostrar texto; Quiero que se muestre una línea de texto diferente para todas y cada una de las opciones seleccionadas. ¿Cómo voy a modificar el código en este ejemplo para que funcione?
Sé que es probable que este sea un proyecto grande, así que no te preocupes por tipear todo para mí si me puedes dar una muestra de lo que tengo que hacer para modificar el código y así afectará más de solo una opción Como probablemente pueda adivinar por el tamaño de esta publicación, me siento bastante cómodo escribiendo a gran distancia.
Cualquier ayuda sería muy apreciada.
Gracias por adelantado.
Vaya, es mucho código ... pero en realidad fue muy fácil de hacer con jQuery (si es una opción). Ver mi ejemplo .
Lo primero que debe hacer es eliminar los espacios en el id. Eso es generalmente malo. En segundo lugar, simplemente muestra / oculta en función de esos valores en la lista de selección pasándolos como id.
El jQuery (no se olvide de incluir el enlace jQuery, sin embargo):
$("#Rank").change(function(){
correspondingID = $(this).find(":selected").val()
$(".style-sub-1").hide();
$("#" + correspondingID).show();
})
De una forma u otra, ya ha terminado con lo que probablemente sea el formato HTML más fácil de usar para el trabajo:
<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="Airman">Airman</option>
<option value="Airman First Class">Airman First Class</option>
<option value="Senior Airman">Senior Airman</option>
<option value="Staff Sergeant">Staff Sergeant</option>
<option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select>
y luego un contenedor de <element> para cada posibilidad de <option> .
<div>
// For Airman
</div>
<div>
// For Senior Airman
</div>
... etcétera etcétera...
Utilizaría este mismo diseño para todo lo que dependa de qué <option> se seleccione; la única línea de texto que desea, la otra casilla de selección, etc. Me gustaría envolver cada uno en un elemento contenedor, por lo que puede orientar fácilmente todos los elementos como uno solo.
<div class="container">
<div>
Line of text for Airman
</div>
<div>
Line of text for Senior Airman
</div>
</div>
<div class="container">
<div>
<select>
<option>Airman Stuff</option>
</select>
</div>
<div>
<select>
<option>Senior Airman Stuff</option>
</select>
</div>
</div>
Ahora dale un identificador a cada uno de los <div> que tenemos, así que cuando seleccionamos "Airman", sabemos qué <div> son los Airman (¡así que sabemos mostrar esos!)
<div class="container">
<div class="airman">
Line of text for Airman
</div>
<div class="senior-airman">
Line of text for Senior Airman
</div>
</div>
<div class="container">
<div class="airman">
<select>
<option>Airman Stuff</option>
</select>
</div>
<div class="senior-airman">
<select>
<option>Senior Airman Stuff</option>
</select>
</div>
</div>
Y agregue el mismo identificador a las <options> de <select id="rank"> :
<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
Ahora tenemos este marcado, ¡aplicar JavaScript para ocultar / mostrar es tan fácil!
$(document).ready(function () {
$(''#Rank'').bind(''change'', function () {
var elements = $(''div.container'').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings'' selected
elements.filter(''.'' + value).show(); // show the ones we want
}
}).trigger(''change''); // Setup the initial states
});
Hecho; pago y envío un ejemplo: http://jsfiddle.net/3UWk2/1/
Una actualización para tu comentario
La razón por la cual su intento de cambiar el código como lo hizo no funcionó es porque actualmente no tenemos ningún controlador de eventos vinculado a los cuadros de <select> segundo nivel <select> ; solo para <select id="rank">
Necesitas básicamente repetir todo lo que acabamos de hacer para el primer nivel de navegación, para el segundo nivel de navegación. En lugar de usar un selector #id para <select> , use una .class ; porque tenemos más de un elemento <select> para orientar, y #id debe ser único:
$(''.second-level-select'').bind(''change'', function () {
var elements = $(''div.second-level-container'').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings'' selected
elements.filter(''.'' + value).show(); // show the ones we want
}
}).trigger(''change''); // Setup the initial states
También hemos tenido que cambiar el nombre de div.container , para detener las casillas <select> ocultan los elementos de los demás.
Vea un ejemplo actualizado aquí: http://jsfiddle.net/3UWk2/3/
incluir código html primero
<!-------first dropdown----------->
<select name="make" id="elements">
<option value="">-</option>
<option value="Satec" >Satec</option>
<option data-val=''m2'' value="Masibus" >Masibus</option>
<option data-val=''m3'' value="Pyrotech" >Pyrotech</option>
<option data-val=''m4'' value="Schneider" >Schneider</option>
</select>
<!---------second dropdown---------->
<select name="model" id="category">
<option value="">-</option>
<option value="PM130" >PM130</option>
<option value="PM2160A" >PM2160A</option>
<option value="MFM101" >MFM101</option>
<option value="ABC" >ABC</option>
</select>
después de incluir script js
<script>
var category = document.getElementById(''category'');
document.getElementById(''elements'').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != ''-'') {
if (optionSelected.dataset.val === ''m2'') {
category.value = ''PM2160A'';
}
else if (optionSelected.dataset.val === ''m3'') {
category.value=''MFM101'';
}
else if (optionSelected.dataset.val === ''m4'') {
category.value=''ABC'';
}
else {
category.value = ''PM130'';
}
} else {
category.value = '''';
}
}
</script>
Seguro que funcionará