jquery show 드롭 다운에서 드롭 다운

나는 '색상'드롭 다운에서 선택할 수있는 멋진 스크립트를 사용하고 있습니다. 첫 번째 옵션을 선택하면 다른 'numbers'-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 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(){

이 방법은 색상 select이 수 select를하지 변경할 경우에만 불을 것입니다 ...

당신이 수 selectif 문이 부분에 불 경우 것 실행 :

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 드롭 다운에서 드롭 다운

답변

관련 문제