最初のドロップダウンで選択が行われるまで、2番目のドロップダウンを非表示にします。

Question

この質問は以前には回答されていましたが、残念ながら答えは私には役に立たないと思います。 （私はかなりJquery/Javascriptを新規に使用しています）

私はこの問題を解決するためにこのjsfiddle #1を使用しています。あなたがモデルを選択するとき、それは、「今年のドロップダウンが表示されます、したがって、基本的

<div id="EU-selector"> 
    <p>For EU:</p> 
    <div class="dropdown" id="arrowdown"> 
     <select name="eu-model" id="eu-model"> 
      <option value="">Select your model:</option> 
      <option value="1">Beetle</option> 
      <option value="2">Caddy4</option> 
      <option value="3">CC</option> 
      <option value="4">E-Golf</option> 
      <option value="5">Eos</option> 
      <option value="6">Golf 7</option> 
      <option value="7">Golf Cabrio</option> 
      <option value="8">Golf GTI</option> 
      <option value="9">Golf R</option> 
      <option value="10">Golf Sportsvan</option> 
      <option value="11">Golf Variant</option> 
      <option value="12">Jetta</option> 
      <option value="13">Passat</option> 
      <option value="14">Polo</option> 
      <option value="15">Scirocco</option> 
      <option value="16">Sharan</option> 
      <option value="17">T6</option> 
      <option value="18">Tiguan</option> 
      <option value="19">Touran</option> 
     </select> 
     <div class="eu-year"> 
      <div class="beetle"> 
       <select class="beetle-year"> 
        <option value="">Select your year:</option> 
        <option value="1">2015</option> 
       </select> 
      </div> 
      <div class="caddy4"> 
       <select class="caddy4-year"> 
        <option value="">Select your year:</option> 
        <option value="1">2015</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div> 

：

は、ここに私のHTMLです。 「Systems」のドロップダウンリスト（3段目）を追加したいが、まずこのハードルを乗り越えたい。

私はまた、このjsfiddle #2

に私のCSSに追加した、.dropdownarrowためのCSSは、下矢印画像を反転することになっている（アップロードする方法を見つけることができませんでした - ？多分あなたはできません）ドロップダウンメニューをクリックするまで（またはオプションを選択してから2番目のドロップダウンに移動するまで）「アクティブ」のままにしてください。

ここで私は、HTMLコードの中に含めましたJSだ（私はそれ自身の.js以降のファイルに移動します）

$(document).ready(function() { 
$('#eu-model').bind('change', function() { 
    var elements = $('div.eu-year').children().hide(); 
    var value = $(this).val(); 

    if (value.length) { 
     elements.filter('.' + value).show(); 
    } 
}).trigger('change'); 
}) 

誰もが私が間違って行くよどこに助言することはできますか？ すべてのサポートは非​​常に高く評価されています！

おかげで、

ブラッド

Answer 1

この

HTML

<div id="EU-selector"> 
    <p>For EU:</p> 
    <div class="dropdown" id="arrowdown"> 
     <select name="eu-model" id="eu-model"> 
      <option value="">Select your model:</option> 
      <option value="1">Beetle</option> 
      <option value="2">Caddy4</option> 
      <option value="3">CC</option> 
      <option value="4">E-Golf</option> 
      <option value="5">Eos</option> 
      <option value="6">Golf 7</option> 
      <option value="7">Golf Cabrio</option> 
      <option value="8">Golf GTI</option> 
      <option value="9">Golf R</option> 
      <option value="10">Golf Sportsvan</option> 
      <option value="11">Golf Variant</option> 
      <option value="12">Jetta</option> 
      <option value="13">Passat</option> 
      <option value="14">Polo</option> 
      <option value="15">Scirocco</option> 
      <option value="16">Sharan</option> 
      <option value="17">T6</option> 
      <option value="18">Tiguan</option> 
      <option value="19">Touran</option> 
     </select> 
     <div class="eu-year"> 
      <div data-value="1"> 
       <select> 
        <option value="">Select your year of your Beetle:</option> 
        <option value="1">2015</option> 
       </select> 
      </div> 
      <div data-value="2"> 
       <select> 
        <option value="">Select your year of your Caddy4:</option> 
        <option value="1">2015</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div> 

を試してみてくださいJavascriptを

$(document).ready(function() { 
    $('#eu-model').on('change', function() { 
     if (this.value.length) { 
      $('.eu-year > div').hide(); 
      $('.eu-year > div[data-value="' + this.value + '"').show(); 
     } 
    }); 
}) 

CSS

このコードで

.eu-year > div { 
    display: none; 
}