Question

我有以下javascript代码来显示/隐藏我的div并且它正常工作。但是在这个隐藏的div中，我有另一个下拉菜单，当我在这个下拉菜单中选择一些内容时，整个div就会消失。

有人能帮助我吗？

if(is_page('about-us'))

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

Answer 1

这是更新后的代码段。

每个选择都应具有唯一名称。而且你应该只在第一个选择中寻找变化事件。

$(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 id="test" name="hold_reason">

检查此https://jsfiddle.net/h0pcjetu/

从下拉列表中显示/隐藏，隐藏div中的新下拉列表消失

2 个答案: