別の選択メニューの値が選択されている場合は、隠しセレクトメニューを表示します。

Question

jQueryとjavaScriptが初めてです。私はブートストラップを使用しています。表示される選択メニューと、非表示の2つの追加選択メニューがあります。私は、表示されている選択メニューオプションからユーザーが "テレビ"を選択した隠しセレクトメニューIDを表示したいと思います。表示されている選択メニューから他の値オプションを選択した場合、説明できる簡単なテキストボックスを表示する必要があります。オンラインで研究した後、私はいくつかのjを使ってそれをしようとしましたが、うまくいきません。以下は私のコードであり、ここで私のjsfiddleのリンクです：https://jsfiddle.net/nx6cc1Lc/

HTML：

<div class="hear-from"> 
     <div class="selects-4 col-xs-12"> 
      <label for="heard_tv">Where did you hear about us from?</label> 
       <select id="heard_tv" class="form-control selectTV" name="heard_tv"> 
        <option>--Choose Option--</option> 
        <option value="TV">TV Commercial</option> 
        <option value="Radio">Radio Advertisement-Other</option> 
        <option value="OT">Other</option> 
       </select> 
    </div> 
    <div class="selects-5 col-xs-6 hidden"> 
       <select id="heard_from_station" class="form-control selectStation" name="heard_from_station"> 
        <option>--Choose Station--</option> 
        <option value="TV:ABC">ABC News</option> 
        <option value="TV:TWCNews">New York 1 - TWC News</option> 
        <option value="TV:BBC">BBC America</option> 
        <option value="TV:CNBC">CNBC</option> 
        <option value="TV:CNN">CNN</option> 
        <option value="TV:Fox News">FOX News</option> 
        <option value="TV:Fox Business">FOX Business</option> 
        <option value="TV:TWCNews">Time Warner News</option> 
        <option value="TV:HLN">Headline News</option> 
        <option value="TV:MSNBC">MSNBC</option> 
        <option value="TV:Other">Other</option> 
       </select> 
      </div> 

      <div class="selects-6 col-xs-6 hidden"> 
       <select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider"> 
        <option>--Choose Provider--</option> 
        <option value="TVP:ATT">AT & T</option> 
        <option value="TVP:Comcast">Comcast</option> 
        <option value="TVP:Cablevision">Cablevision</option> 
        <option value="TVP:Charter">Charter Comm.</option> 
        <option value="TVP:Cox">Cox Comm.</option> 
        <option value="TVP:DirectTV">DirectTV</option> 
        <option value="TVP:Dish">Dish Network</option> 
        <option value="TVP:TimeWarner">Time Warner Cable</option> 
        <option value="TVP:VerFiOS">Verizon FiOS</option> 
        <option value="TVP:Antenna">Over the Air/Antenna</option> 
        <option value="TVP:Other">Other TV Provider</option> 
       </select> 
      </div> 

    </div> 

Javascriptを：

// show tv station and provider menus if TV selected 
    $(document).ready(function(){ 
     $('#heard_tv').on('change', function() { 
      if (this.value === "TV") 
      //.....................^....... 
      { 
      $("#heard_from_station").removeClass('hidden'); 
      $("#heard_from_provider").removeClass('hidden'); 
      } 
      else 
      { 
      $('#heard_from_station').removeClass().addClass('hidden'); 
      $('#heard_from_provider').removeClass().addClass('hidden'); 
      } 

     }); 

    }); 

Answer 1

下記のようにスクリプトを更新します。

// show tv station and provider menus if TV selected 
    $(document).ready(function(){ 
     $('#heard_tv').on('change', function() { 
      if (this.value === "TV") 
      { 
      $("#heard_from_station").parent().removeClass('hidden'); 
      $("#heard_from_provider").parent().removeClass('hidden'); 
      } 
      else 
      { 
      $('#heard_from_station').parent().addClass('hidden'); 
      $('#heard_from_provider').parent().addClass('hidden'); 
      } 

     }); 

    }); 

htmlに親要素 ".parent（）"の "hidden"クラスが含まれているため、親クラスにクラスを追加/削除する必要があります。あるいは、親要素にIDを与え、 ".parent（）"を使わずにスクリプト内でそれらのIDを直接使用することもできます。 this.BelowのためのjQueryの

Answer 2

ジャスト（ショーを使用）と非表示は、（）の問題は、あなたの二次選択メニューが含まれているdivタグが隠されているということではありません、あなたの問題のために

<script src="jquery.min.js"></script> 
<script src="sample.js"></script> 

    <div class="hear-from"> 
              <div class="selects-4 col-xs-12"> 
               <label for="heard_tv">Where did you hear about us from?</label> 
                <select id="heard_tv" class="form-control selectTV" name="heard_tv"> 
                 <option>--Choose Option--</option> 
                 <option value="TV">TV Commercial</option> 
                 <option value="Radio">Radio Advertisement-Other</option> 
                 <option value="OT">Other</option> 
                </select> 
              </div> 
              <div class="selects-5 col-xs-6" style="display:none"> 
                <select id="heard_from_station" class="form-control selectStation" name="heard_from_station"> 
                 <option>--Choose Station--</option> 
                 <option value="TV:ABC">ABC News</option> 
                 <option value="TV:TWCNews">New York 1 - TWC News</option> 
                 <option value="TV:BBC">BBC America</option> 
                 <option value="TV:CNBC">CNBC</option> 
                 <option value="TV:CNN">CNN</option> 
                 <option value="TV:Fox News">FOX News</option> 
                 <option value="TV:Fox Business">FOX Business</option> 
                 <option value="TV:TWCNews">Time Warner News</option> 
                 <option value="TV:HLN">Headline News</option> 
                 <option value="TV:MSNBC">MSNBC</option> 
                 <option value="TV:Other">Other</option> 
                </select> 
              </div> 

              <div class="selects-6 col-xs-6" style="display:none"> 
                <select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider"> 
                 <option>--Choose Provider--</option> 
                 <option value="TVP:ATT">AT & T</option> 
                 <option value="TVP:Comcast">Comcast</option> 
                 <option value="TVP:Cablevision">Cablevision</option> 
                 <option value="TVP:Charter">Charter Comm.</option> 
                 <option value="TVP:Cox">Cox Comm.</option> 
                 <option value="TVP:DirectTV">DirectTV</option> 
                 <option value="TVP:Dish">Dish Network</option> 
                 <option value="TVP:TimeWarner">Time Warner Cable</option> 
                 <option value="TVP:VerFiOS">Verizon FiOS</option> 
                 <option value="TVP:Antenna">Over the Air/Antenna</option> 
                 <option value="TVP:Other">Other TV Provider</option> 
                </select> 
              </div> 

             </div> 

<script> $(document).ready(function(){ 
     $('#heard_tv').on('change', function() { 
      if (this.value === "TV") 
      //.....................^....... 
      { 
      $(".selects-5").show(); 
      $(".selects-6").show(); 
      } 
      else 
      { 
      $('.selects-5').hide(); 
      $('.selects-6').hide(); 
      } 

     }); 

    });</script> 

Answer 3

コード部分であります選択メニューそのものです。それでも、スクリプトは選択メニューからクラスを削除しようとしています。ですから、これを解決するにはいくつかの方法があります。

この問題を解決する方法の1つは、divタグの代わりに選択メニューに非表示クラスを適用することです。

<div class="selects-5 col-xs-6"> 
    <select id="heard_from_station" class="form-control selectStation hidden" name="heard_from_station"> 
       ... 
    </select> 
</div> 

<div class="selects-6 col-xs-6"> 
    <select id="heard_from_provider" class="form-control selectProvider hidden" name="heard_from_provider"> 
       ... 
    </select> 
</div>