从下拉菜单中显示/隐藏，隐藏 div 中的新下拉菜单消失

debugcn 发表于 Dev

马里奥

我有以下 javascript 代码来显示/隐藏我的 div 并且它工作正常。但是在这个隐藏的 div 中，我有另一个下拉菜单，当我在这个下拉菜单中选择某些内容时，完整的 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>

里希普里

这是更新的片段。

每个选择都应该有唯一的名称。并且您应该只在第一次选择时查找更改事件。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。