2つのドロップダウンリストを含むdivボックスを隠すか表示します

こんにちは私の連絡先フォームにはdivボックスが2つあり、ドロップされた値に基づいて表示されます。問題は私は両方を管理することはできません。最初のドロップダウン "クラス=色"が正常に動作しますが、 "クラス= ddcolor"を表示する代わりに2番目のドロップダウンを選択すると、ボックス"。言葉で説明するのは少し難しいですが、私はすべてのコードを送っています。助けてください。2つのドロップダウンリストを含むdivボックスを隠すか表示します

<!doctype html> 
 
<html> 
 
<head> 
 
<!--hide/show div based on dropdown selection--> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
 
<script src="js/hid_show_div.js"></script> 
 
<script src="js/main_hid_show.js"></script> 
 
</head> 
 
<body> 
 
    \t \t  <div> 
 
\t \t \t <fieldset> 
 
\t \t \t <p dir="rtl"><label>case1</label> 
 
      <select id="Color" required="required"> 
 
      <option>please select</option> 
 
      <option value="redd">home<option> 
 
      <option value="greenn">car</option> 
 
      </select></p> 
 
\t  \t </fieldset> 
 
      </div> 
 
<div class="redd box"> \t 
 
      <div> 
 
\t \t \t <fieldset> 
 
\t \t \t <p dir="rtl"><label>case2</label> 
 
      <select id="ddColor" required="required"> 
 
      <option>please select</option> 
 
      <option value="red">sell<option> 
 
      <option value="green">rent</option> 
 
      </select></p> 
 
\t  \t </fieldset> 
 
      </div> 
 
      <div class="red box"> \t \t \t 
 
      </div> 
 
      <div class="green box"> \t \t \t 
 
       </div> 
 
    
 
</div> 
 
<div class="greenn box"> \t \t \t 
 
</div> 
 
</body> 
 
</html>

main_hid_show.js 
 
$(document).ready(function(){ 
 
    $("#Color").change(function() { 
 
     $(this).find("option:selected").each(function(){ 
 
      if($(this).attr("value")=="redd"){ 
 
       $(".box").not(".redd").hide(); 
 
       $(".redd").show(); 
 
      } 
 
      else if($(this).attr("value")=="greenn"){ 
 
       $(".box").not(".greenn").hide(); 
 
       $(".greenn").show(); 
 
      } 
 
      else{ 
 
       $(".box").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});

hid_show_div.js 
 
$(document).ready(function(){ 
 
    $("#ddColor").change(function() { 
 
     $(this).find("option:selected").each(function(){ 
 
      if($(this).attr("value")=="red"){ 
 
       $(".box").not(".red").hide(); 
 
       $(".red").show(); 
 
      } 
 
      else if($(this).attr("value")=="green"){ 
 
       $(".box").not(".green").hide(); 
 
       $(".green").show(); 
 
      } 
 
      else{ 
 
       $(".box").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});

出典

2016-06-21 Malekian

ありがとうあなたの問題は、あなたが 'ボックス' クラスFを持っていますまたは外側のと.greenクラスの両方と同様に、外側の.reddクラスと.greennクラスの両方を使用できます。これは、.redオプションを選択したときに外側の.reddを非表示にします。これは、クラス 'ボックス'の要素であり、クラス '赤'がないためです。 redd boxに別のクラスを追加し、jQueryのnotセレクタであることなどが

$("#ddColor").change(function() { 
     $(this).find("option:selected").each(function(){ 
      if($(this).attr("value")=="red"){ 
       $(".inner-box").not(".red").hide(); 
       $(".red").show(); 
      } 
      else if($(this).attr("value")=="green"){ 
       $(".inner-box").not(".green").hide(); 
       $(".green").show(); 
      } 
      else{ 
       $(".inner-box").hide(); 
      } 
     }); 
    }).change();

https://jsfiddle.net/wme028os/2/

出典

2016-06-21 16:02:37

それが今完璧に働いてどうもありがとうございました。 – Malekian