jquery showドロップダウンからのドロップダウン

私は 'colors'-dropdownから選択できる素敵なスクリプトを使用しています。最初のオプションを選択すると、別の「数字」ドロップダウンが配置されました。しかし今、問題：この「数字」ドロップダウンで何かを選択すると、すべての選択メニューが消滅します。私はそれを維持して独自のハイパーリンクを与えたい。私のコード：どちらかselectが変更されたときにjquery showドロップダウンからのドロップダウン

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Select Box</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("select").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 if($(this).attr("value")=="blue"){ 
      $(".box").not(".blue").hide(); 
      $(".blue").show(); 
     } 
     else{ 
      $(".box").hide(); 
     } 
    }); 
}).change(); 
}); 
</script> 
</head> 
<body> 
<div> 
    <select> 
     <option>Choose Color</option> 
     <option value="red">Red</option> 
     <option value="green">Green</option> 
     <option value="blue">Blue</option> 
    </select> 
</div> 
<div class="red box" style="margin-top:10px;"><select> 
     <option>Choose number</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select></div> 
<div class="green box">You have selected <strong>green option</strong> so i am here</div> 
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div> 
</body> 
</html>

出典

2016-09-12 Jan de Vries

あなたはこの$("select").change(function(){イベントを発射しています。あなたは数selectにif声明のこの部分を、それを発射した場合...色selectが数selectがない変更されたときに、それが唯一発生します。この方法で

を

<select id="colorSelect"> 
    <option>Choose Color</option> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
    <option value="blue">Blue</option> 
</select> 

$("#colorSelect").change(function(){

ます：次のように変更します。

else { 
    $(".box").hide(); 
}

これはすべてのボックスを非表示にします。

実施例：

$(document).ready(function(){ 
 
$("#colorSelect").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 if($(this).attr("value")=="blue"){ 
 
      $(".box").not(".blue").hide(); 
 
      $(".blue").show(); 
 
     } 
 
     else{ 
 
      $(".box").hide(); 
 
     } 
 
    }); 
 
}).change(); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Select Box</title> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script> 
 
</head> 
 
<body> 
 
<div> 
 
    <select id="colorSelect"> 
 
     <option>Choose Color</option> 
 
     <option value="red">Red</option> 
 
     <option value="green">Green</option> 
 
     <option value="blue">Blue</option> 
 
    </select> 
 
</div> 
 
<div class="red box" style="margin-top:10px;"><select> 
 
     <option>Choose number</option> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
    </select></div> 
 
<div class="green box">You have selected <strong>green option</strong> so i am here</div> 
 
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div> 
 
</body> 
 
</html>

出典

2016-09-12 17:30:36 brso05

おかげで、素晴らしい作品。 –

@Jandeあなたは大歓迎です！ – brso05

jquery showドロップダウンからのドロップダウン

答えて

関連する問題