Question

对于“是否见证事件？”这个问题，我有两个选项'是'和'否'。如果选择“是”选项，则会出现另外两个问题，然后选项值保存在php值中，如果“否”，则隐藏两个问题。在刷新页面或提交表单时加载正常但是如果选项设置为“是”则将两个问题加载为隐藏，并且只有在下拉设置为“否”然后“是”时才能显示再次。我正在寻找的是，如果它设置为“是”，那么在页面重新加载时提交表单仍然设置为“是”（我已经工作了），这两个问题也是可见的。

谢谢你们，太

$(window).on("load", function() {
  $(function() {
    $('select[name="a18"]').change(function(e) {
      $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
    });
  });
  var witness = '<?php echo $A18 ?>';
});

p {
  margin: 0;
  font-size: 16px;
}
textarea {
  overflow: hidden;
  resize: none;
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  height: 40px;
  width: 98%;
  margin: 0;
  background: #fff;
}
.dropDown {
  width: 99.5%;
  height: 46px;
  margin: 0;
  border: none;
  background: none;
}
#irMain {
  background-color: #ddebf7;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
}
#irMainWitness {
  background-color: #ddebf7;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
  display: none;
}
#irQMainWitness {
  background-color: #FFF;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
  display: none;
}
#irBottomWitness {
  background-color: #FFF;
  border: 2px solid #000;
  height: 50px;
  margin: 0;
  display: none;
}
#irQMainDD {
  background-color: #FFF;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
  <p>Was there a Witness to the Incident?:</p>
</div>

<div id="irQMainDD">
  <select name="a18" class="dropDown">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
  </select>
</div>

<div id="irMainWitness">
  <p>Name of Witness:</p>
</div>

<div id="irQMainWitness">
  <textarea name="a19" cols="1" rows="2">
  </textarea>
</div>

<div id="irMainWitness">
  <p>Contact Number of Witness:</p>
</div>

<div id="irBottomWitness">
  <textarea name="a20" cols="1" rows="2">
  </textarea>
</div>

更新1：

变量'见证'设置为表单提交的选项值。（仍然没有工作）

代码：

<script>
    $( window ).on( "load", function() {
        $(function() {
            $('select[name="a18"]').change(function(e) {
            $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
            }); 
        }); 

        witness = "<?php echo $savedA18 ;?>";

        if (witness == "Yes"){
            $('select[name="a18"]').val("Yes");
            $('select[name="a18"]').triggerHandler("change");
        }
    });
    </script>

输出：

$( window ).on( "load", function() {
        $(function() {
            $('select[name="a18"]').change(function(e) {
            $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
            }); 
        }); 

        witness = "Yes";

        if (witness == "Yes"){
            $('select[name="a18"]').val("Yes");
            $('select[name="a18"]').triggerHandler("change");
        }
    });

Answer 1

您可以在将值设置为“是”的代码后手动触发更改事件。

$('select[name="a18"]').triggerHandler("change");

$(window).on("load", function() {
  
  $('select[name="a18"]').val("Yes");
  $(function() {
    $('select[name="a18"]').change(function(e) {
      $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
    });
  });
  var witness = '<?php echo $A18 ?>';
  
  // set the value on onload
  
  $('select[name="a18"]').val("Yes");
  
  $('select[name="a18"]').triggerHandler("change");
  
  
  
});

p {
  margin: 0;
  font-size: 16px;
}
textarea {
  overflow: hidden;
  resize: none;
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  height: 40px;
  width: 98%;
  margin: 0;
  background: #fff;
}
.dropDown {
  width: 99.5%;
  height: 46px;
  margin: 0;
  border: none;
  background: none;
}
#irMain {
  background-color: #ddebf7;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
}
#irMainWitness {
  background-color: #ddebf7;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
  display: none;
}
#irQMainWitness {
  background-color: #FFF;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
  display: none;
}
#irBottomWitness {
  background-color: #FFF;
  border: 2px solid #000;
  height: 50px;
  margin: 0;
  display: none;
}
#irQMainDD {
  background-color: #FFF;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
  <p>Was there a Witness to the Incident?:</p>
</div>

<div id="irQMainDD">
  <select name="a18" class="dropDown">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
  </select>
</div>

<div id="irMainWitness">
  <p>Name of Witness:</p>
</div>

<div id="irQMainWitness">
  <textarea name="a19" cols="1" rows="2">
  </textarea>
</div>

<div id="irMainWitness">
  <p>Contact Number of Witness:</p>
</div>

<div id="irBottomWitness">
  <textarea name="a20" cols="1" rows="2">
  </textarea>
</div>

Answer 2

执行以下操作，创建一个函数来切换问题div并在页面加载时调用它，并在下拉更改时调用它。

 $(document).ready(function(){
   var witness = '<?php echo $A18 ?>';
   $.toggleQuestions = function(drpDown){       
     $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle(drpDown.val() == 'Yes');
   };

  $('select[name="a18"]').on("change", function(e) {
    $.toggleQuestions($(this));  
  });

  $(window).on("load", function() {
    $.toggleQuestions($('select[name="a18"]'));  
  });

});

Answer 3

你可以改变这个：

$('select[name="a18"]').change(function(e) {
  $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});

到此：

$('select[name="a18"]').change(function(e) {
  $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle();
});

因为第一个只隐藏而不显示这些。

Onload设置div为可见？

3 个答案: