En primer lugar, odio mencionar un problema que ya se ha solucionado, pero debes saber que las otras opciones que he encontrado en este sitio no me funcionan.Muestra un segundo menú desplegable basado en la selección desplegable anterior

Básicamente, quiero construir un breve formulario donde hay 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 para cada opción seleccionada en el primer cuadro desplegable y no solo por 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).

Entonces me encontré con este ejemplo, que es exactamente el tipo de cosas Busco:

http://jsfiddle.net/e9XvP/

embargo, por alguna razón, no parece funcionar para mí este código. 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 código HTML que tengo ahora:

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

desplegable 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 he dicho, ninguno de los códigos de JavaScript en los ejemplos anteriores están trabajando para mí, 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. He aquí un ejemplo que encontré:

Toggle a hidden div when a particular dropdown option is selected/de-selected

Sin embargo, una vez más, a diferencia de este exaple no quiero sólo una opción para visualizar el 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 sea un proyecto grande, así que no se preocupe por escribir todo para mí si puede darme una muestra de lo que tengo que hacer para modificar el código para que ' Afectará más que solo una opción. Como probablemente pueda adivinar por el tamaño de esta publicación, me siento bastante cómodo con la escritura a gran escala.

Cualquier ayuda sería muy apreciada.

Gracias de antemano.

Fuente

2011-08-05 Scott

El segundo ejemplo realmente debería estar funcionando ... ¿Tiene habilitado JavaScript para jsfiddle? – pyvi

Quise decir que no funciona para mí cuando uso el javascript con mi propio HTML anterior (incluso en jsfiddle). Funciona bien cuando simplemente ejecuto el ejemplo dado tal como está. – Scott

De una manera u otra, ya ha terminado con lo que está probablemente el marcado 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 uno <element> contenedor para cada posibilidad de <option>.

<div> 
    // For Airman 
</div> 
<div> 
    // For Senior Airman 
</div>

... etc etc ...

que haría uso de esta misma disposición para todo lo que depende de las cuales se selecciona <option>; 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 golpe un identificador para cada uno de los <div> 's que tenemos, por lo que cuando se selecciona el 'aviador', sabemos lo que <div>' s son los Airmans (por lo que sabemos para mostrar aquellos!)

<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 añadir el mismo identificador a los <options> 's de la <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 margen de beneficio, aplicando el Ja vaScript 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 su comentario

La razón de su intento de cambiar el código como el que no haya trabajado es porque hemos Actualmente tenemos ningún controlador de eventos unido al segundo nivel <select> cajas ; solo a <select id="rank">

Básicamente, debe 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 el <select>, use un .class; porque tenemos más de un elemento de <select> para apuntar y #id 's tiene que 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 la div.container, para detener las cajas <select> ocultando los demás elementos.

Salida un ejemplo actualizado aquí: http://jsfiddle.net/3UWk2/3/

Fuente

2011-08-05 14:15:51 Matt

Muchas gracias, Matt, ¡esto se ve exactamente como lo que necesito! – Scott

En realidad, una última cosa; Quiero que se muestre la línea de texto única para cada opción en el segundo menú desplegable, no en el primero (es decir, "Línea de texto para cosas de Airman", "Línea de texto para material de Senior Airman", etc., no "Línea de texto para Airman"), y solo quiero que se muestre después de seleccionar una opción en el segundo menú desplegable. Intenté simplemente cambiar las clases de tu primer contenedor por "airman-stuff", etc. y luego agregué los valores coincidentes en la etiqueta "Airman Stuff"

@Scott: Marque la parte inferior de mi respuesta para una actualización :) – Matt

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

Fuente

2011-08-05 14:13:06 mkk

Esta es también una solución más fácil de mantener a largo plazo. Los conjuntos grandes de selecciones en páginas web que se activan o desactivan pueden ser un poco más digeribles para otras personas que luego tienen que trabajar en la página web. – Felan

No estoy familiarizado con AJAX, pero gracias por su respuesta, lo investigaré y veré qué puedo hacer. – Scott

Vaya que es un montón de código ... pero en realidad era muy fácil de hacer con jQuery (si eso es una opción). Ver mi example.

Lo primero que debe hacer es eliminar los espacios en la identificación. 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(); 
})

Fuente

2011-08-05 14:28:21

incluyen código html primera

<!-------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 que incluye un 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>

Se seguro que funcionará

Fuente

2017-07-26 11:05:33

Muestra un segundo menú desplegable basado en la selección desplegable anterior

Respuesta

Una actualización para su comentario

Cuestiones relacionadas