Show/Hide from dropdown, new dropdown in hidden div disappear

Question

I have the following javascript code to show/hide my div and it is working correctly. But in this hidden div, I have another dropdown menu, and when I select something in this dropdown menu the complete div disappear.

Can someone help me?

$(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();
            } 
			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>

Answer 1

Here is the updated snippet.

Each select should have unique name. And you should only look for change event on the first select.

$(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();
            } 
			      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>