Вопрос по javascript, html, drop-down-menu, css – Это обязательно сработает.

18

е всего, я ненавижу поднимать вопрос, который уже был решен, но вы должны знать, что другие варианты, которые я нашел на этом сайте, не работают для меня.

По сути, я хочу построить короткую форму, в которой есть два выпадающих списка. Первое всегда отображается, второе скрыто по умолчанию. Когда выбран определенный параметр в первом раскрывающемся списке, я хочу, чтобы отображался второй раскрывающийся список. Это прекрасный пример того, что я имею в виду:

http://jsfiddle.net/whkQw/20/

ОДНАКО, в отличие от приведенного выше примера, у меня есть отдельный набор параметров для отображения в раскрывающемся списке для каждого параметра, выбранного в первом раскрывающемся списке, а не только для одного из параметров. Другими словами, в приведенном выше примере, если вы выберете «Китай», появится второе выпадающее окно, но если вы выберете что-то еще, оно останется скрытым. Это не то, что я хочу. Я хочу, чтобы отображалось другое раскрывающееся меню, если вы выбрали «Тайвань», и еще одно раскрывающееся меню, отображаемое, если вы выбрали «Германия», и т. Д. Для каждой опции. Я попытался просто продублировать javascript в этом примере для каждой опции, соответственно изменив теги имен, но это не сработало (я новичок, когда дело доходит до Javascript).

Итак, я наткнулся на этот пример, и это именно то, что я ищу:

http://jsfiddle.net/e9XvP/

Тем не менее, по какой-то причине этот код не работает для меня. Это не имеет никакого эффекта вообще; второй выпадающий просто остается скрытым независимо от того, что выбрано. Мои выпадающие списки гораздо более многочисленны и длинны, чем в приведенном выше примере. Вот HTML-код, который у меня есть сейчас:

Раскрывающийся список 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>

Раскрывающийся список 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>

Как я уже говорил, ни один из javascript-кодов в приведенных выше примерах не работает для меня, и я совершенно новичок в javascript (и не слишком опытен в HTML), так что какие-нибудь предложения?

Кроме того, когда пользователь делает выбор во втором раскрывающемся списке, я хочу, чтобы под раскрывающимся списком отображалась уникальная строка текста (т.е. уникальная для его выделения). Вот пример, который я нашел:

Переключить скрытый div, когда конкретный выпадающий вариант выбран / отменен

Однако, опять же, в отличие от этого примера, я не хочу, чтобы только один вариант отображал текст; Я хочу, чтобы для каждой выбранной опции отображалась другая строка текста. Как мне изменить код в этом примере, чтобы это работало?

Я знаю, что это, вероятно, будет большой проект, так что не беспокойтесь о том, чтобы мне все напечатать, если вы можете просто дать мне пример того, что мне нужно сделать, чтобы изменить код так, чтобы он повлиял больше, чем только один вариант. Как вы, вероятно, догадываетесь по размеру этого поста, я вполне доволен тем, что пишу в большом количестве.

Любая помощь приветствуется.

Заранее спасибо.

Второй пример действительно должен работать ... У вас включен JavaScript для jsfiddle? pyvi
Я имел в виду, что это не работает для меня, когда я использую JavaScript с моим собственным HTML выше (даже в jsfiddle). Это работает нормально, когда я просто запускаю данный пример как есть. Scott

Ваш Ответ

4   ответа
3

ий и для каждого из них много других, нет смысла загружать их все сразу. Идея состоит в том, чтобы отправить запрос AJAX и обновить второй выбор с соответствующими параметрами. Вы также можете хранить правильный текст для каждой опции в базе данных .. таким образом, у вас есть все, что вы хотите, и вы не заставляете пользователя загружать ненужные выборы

Я не знаком с AJAX, но спасибо за ваш ответ, я посмотрю в него и посмотрю, что я могу придумать. Scott
Это также более простое решение для поддержания долгосрочной перспективы. Большие наборы выбора на веб-страницах, которые включаются или выключаются, могут быть немного сложным для других людей, которые впоследствии должны будут работать на веб-странице. Felan
2

сначала включите HTML-код

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

после включения 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>

Это обязательно сработает.

15

вы уже получили, вероятно, самую простую HTML-разметку для работы:

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

а потом один<element> контейнер для каждой возможности<option>.

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

и т. д.

Я бы использовал этот же макет для всего, что зависит от того, какой<option> выбран; желаемую уникальную строку текста, поле выбора другого и т. д. и т. д. Я бы обернул каждый из них в элемент контейнера, чтобы вы могли легко нацеливать все элементы как один.

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

Теперь выберите идентификатор для каждого из<div>у нас есть, поэтому, когда "Летчик" выбран, мы знаем, какие<div>это летчики (так мы знаем, чтобы показать те!)

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

И добавьте тот же идентификатор к<options>из<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>

Теперь у нас есть эта разметка, применение JavaScript для скрытия / показатак легко!

$(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
});

Готово; проверить пример:http://jsfiddle.net/3UWk2/1/

Обновление для вашего комментария

Причина, по которой ваша попытка изменить код, как вы это не сделали, заключается в том, что в настоящее время у нас нет обработчика событий, привязанного ко 2-му уровню<select> коробки; только для того, чтобы<select id="rank">

Вам нужно в основном повторить все, что мы только что сделали для навигации первого уровня, для навигации второго уровня. Вместо использования#id селектор для<select>, использовать.class; потому что у нас есть более одного<select> элемент к цели, и#idдолжны быть уникальными:

$('.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

Мы также должны были изменить имяdiv.container, чтобы остановить<select> коробки, скрывающие элементы друг друга.

Проверьте обновленный пример здесь:http://jsfiddle.net/3UWk2/3/

@ Скотт: Проверьте нижнюю часть моего ответа для обновления :) Matt
Большое спасибо, Мэтт, это выглядит именно так, как мне нужно! Scott
На самом деле, еще одна вещь; Я хочу, чтобы уникальная строка текста отображалась для каждого параметра во втором раскрывающемся списке, а не в первом (т. Е. «Строка текста для материала летчика», «Строка текста для материала старшего летчика» и т. Д., А не «Строка текста для пилота»), и я хочу, чтобы она отображалась только после выбора параметра во втором раскрывающемся списке. Я попытался просто поменять классы в вашем первом контейнере на «airman-stuff» и т. Д., А затем добавить соответствующие значения в тег «Airman Stuff» <option>, но это не сработало. Нужно ли будет назвать этот контейнер как-нибудь еще, а затем как-нибудь отредактировать javascript? Scott
Работает как шарм. :) Еще раз спасибо, Мэтт, это многому меня научило. Scott
8

это много кода ... но на самом деле это было действительно легко сделать с помощью jQuery (если это вариант). См мойпример.

Первое, что вам нужно сделать, это удалить пробелы в идентификаторах. Это вообще плохо. Во-вторых, вы просто показываете / скрываете эти значения в списке выбора, передавая их как идентификаторы.

JQuery (не забудьте включить ссылку на jQuery):

$("#Rank").change(function(){
   correspondingID = $(this).find(":selected").val()
   $(".style-sub-1").hide();
   $("#" + correspondingID).show();
})

Похожие вопросы