드롭 다운에서 표시/숨기기 숨겨진 div의 새 드롭 다운이 사라짐

Question

내 div를 표시하거나 숨기고 다음 javascript 코드가 올바르게 작동합니다. 하지만이 숨겨진 div에는 다른 드롭 다운 메뉴가 있는데이 드롭 다운 메뉴에서 무언가를 선택하면 전체 div가 사라집니다.

나를 도와 줄 사람이 있습니까?

Answer 1

$(document).ready(function(){ 
 
    $("select").change(function(){ 
 
     $(this).find("option:selected").each(function(){ 
 
      var optionValue = $(this).attr("value"); 
 
      if(optionValue){ 
 
       $(".reason").not("." + optionValue).hide(); 
 
       $("." + optionValue).show(); 
 
      } 
 
\t \t \t else{ 
 
       $(".reason").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="hold_reason"> 
 
<option value="">Select option</option> 
 
<option value="Hold">Hold</option> 
 
</select> 
 

 

 
<div class="Hold reason">Hold reason 
 
<select class="form-control" name="hold_reason"> 
 
<option value="">Select reason</option> 
 
<option value="">hold</option> 
 
</select> 
 
</div>

다음은 업데이트 미리보기입니다.

각 선택에는 고유 한 이름이 있어야합니다. 그리고 첫 번째 선택에서만 변경 이벤트를 찾아야합니다.

$(document).ready(function(){ 
 
    // changed line 
 
    // this selects the first select element 
 
    $("select[name='hold']").change(function(){ 
 
     $(this).find("option:selected").each(function(){ 
 
      var optionValue = $(this).attr("value"); 
 
      if(optionValue) { 
 
       $(".reason").not("." + optionValue).hide(); 
 
       $("." + optionValue).show(); 
 
      } 
 
\t \t \t  else { 
 
       $(".reason").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="hold"> 
 
    <option value="">Select option</option> 
 
    <option value="Hold">Hold</option> 
 
</select> 
 

 

 
<div class="Hold reason">Hold reason 
 
    <select class="form-control" name="hold_reason"> 
 
    <option value="">Select reason</option> 
 
    <option value="">hold</option> 
 
    </select> 
 
</div>

Answer 2

선택은 선택을위한 고유해야합니다.

<select id="test" name="hold_reason"> 

확인이 https://jsfiddle.net/h0pcjetu/