Show/Hide 来自下拉菜单，隐藏 div 中的新下拉菜单消失

Question

我有以下 javascript 代码到 show/hide 我的 div 并且它工作正常。但是在这个隐藏的 div 中，我有另一个下拉菜单，当我 select 这个下拉菜单中的某些内容时，完整的 div 消失了。

有人可以帮助我吗？

$(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

这是更新后的代码段。

每个 select 都应该有唯一的名称。而且您应该只在第一个 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>

Answer 2

select或者对于 select 应该是唯一的。

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

检查这个https://jsfiddle.net/h0pcjetu/

Show/Hide 来自下拉菜单，隐藏 div 中的新下拉菜单消失

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

html

javascript

hidden

drop-down-menu

dropdown