我正在尝试设置一个页面，人们可以通过在网络表单中选择“开始”来触发调查问卷 - 它会弹出第一个问题的 DIV。
当他们回答每个问题(是/否选择)时，它要么打开一个特定于该问题的 DIV，其中显示“不 - 离开，因为 XXXX”，要么在新的 DIV 中提出下一个问题...这会重复大约 8次。
到目前为止，我可以显示第一个问题，但当我选择问题 1 的答案时它不会执行任何操作 - 它应该使 Q2 DIV 出现或提供上下文 DIV 来说明为什么他们无法继续。
我在this jsfiddle link中有一个(非常)精简的演示
HTML 代码是:
<div class="container">
<form id="GeneralEnquiryForm" class="row justify-content-center no-gutters col-12" name="GeneralEnquiry" method="post" action="https://somesite.com/forms/accessrequest/request_submitted.php" enctype="multipart/form-data" data-toggle="validator">
<div class="form-group row justify-content-center col-sm-12 col-md-12 col-lg-10 col-xl-10">
<div id="GeneralEnquiryHeading">
<h2>Request Form</h2>
</div>
</div>
<!-- ############################ -->
<!-- # Main Menu Selection Tree # -->
<!-- ############################ -->
<div class="form-group row justify-content-center col-sm-12 col-md-12 col-lg-10 col-xl-10">
<div class="form-group col-12">
<label for="requestSelect">This checklist MUST be complete to submit this form. *</label>
<select class="form-control" name="requestSelect" id="requestSelect" required>
<option value="" selected disabled="disabled">Please select the check to begin.</option>
<option title="Option 1" value="HealthCheck">Commence Checklist</option>
</select>
</div>
<!-- ############################# -->
<!-- # Health Check # -->
<!-- ############################# -->
<div class="form-group col-12 clearAll HealthCheck fade show" role="dialog">
<div>
<h6>Request Form</h6>
<h2>CHECK LIST</h2>
</div>
<label for="HealthCheck1">Have you returned from overseas travel in the past 14 days? *</label>
<select class="form-control" name="HealthCheck1" id="HealthCheck1" required>
<option value="" selected disabled="disabled"> Please select Yes or No </option>
<option title="HealthCheck1Yes" value="HealthCheck1Yes">Yes</option>
<option title="HealthCheck1No" value="HealthCheck1No">No</option>
</select>
</div>
</div>
<div class="form-group col-12 clearAll HealthCheck1No alert alert-info fade show" role="alert">
<label for="HealthCheck2">Have you returned from interstate travel in the past 14 days? *</label>
<select class="form-control" name="HealthCheck2" id="HealthCheck2" required>
<option value="" selected disabled="disabled"> Please select Yes or No </option>
<option title="HealthCheck2Yes" value="HealthCheck2Yes">Yes</option>
<option title="HealthCheck2No" value="HealthCheck2No">No</option>
</select>
</div>
<div class="form-group col-12 clearAll HealthCheck2No alert alert-info fade show" role="alert">
<label for="HealthCheck3">Are you currently required to self-isolate? *</label>
<select class="form-control" name="HealthCheck3" id="HealthCheck3" required>
<option value="" selected disabled="disabled"> Please select Yes or No </option>
<option title="HealthCheck3Yes" value="HealthCheck3Yes">Yes</option>
<option title="HealthCheck3No" value="HealthCheck3No">No</option>
</select>
</div>
<!-- ############################ -->
<!-- # Health Check Pop-Up Help # -->
<!-- ############################ -->
<div class="form-group col-12 clearAll HealthCheck1Yes alert alert-warning fade show" role="alert">
<h5>Do <strong>NoT</strong> attend campus!</h5>
<div class="row col-12 align-items-center">
<div class="termsIcon col-2 .col-sm-2 col-md-2 col-lg-1 col-xl-1">
<img src="../images/warning_small.png" class="rounded float-left" alt="">
</div>
<div class="col">
<h6><strong>If you have returned from overseas travel in the past 14 days, you should be self-isolating.</strong></h6></br>
</div>
</div>
</div>
<div class="form-group col-12 clearAll HealthCheck2Yes alert alert-warning fade show" role="alert">
<h5>Do <strong>NoT</strong> attend campus!</h5>
<div class="row col-12 align-items-center">
<div class="termsIcon col-2 .col-sm-2 col-md-2 col-lg-1 col-xl-1">
<img src="../images/warning_small.png" class="rounded float-left" alt="">
</div>
<div class="col">
<h6><strong>If you have returned from interstate travel in the past 14 days, you should be self-isolating</strong></h6></br>
</div>
</div>
</br></br>
</div>
<!-- ############################# -->
<!-- # Individual Pop-Up Modules # -->
<!-- ############################# -->
<hr class="separator col-12">
* Please fill in ALL of the above fields or the form will not submit.
<hr class="separator col-12">
<div id="new-div"></div>
<div class="form-group justify-content-right col-sm-12 col-md-12 col-lg-10 col-xl-10">
<button type="submit" value="Submit" id="submit" class="btn btn-primary float-right" onclick="return checkform()">Submit Request</button>
</div>
</form>
</div>
</div>
Javascript
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
<script>
$(function () {
$("#requestSelect").change(function() {
var val = $(this).val();
if(val === "HealthCheck") {
$(".clearAll").hide();
$(".HealthCheck").show();
}
});
});
</script>
<script>
$(function () {
$("#HealthCheck1").change(function() {
var val = $(this).val();
if(val === "HealthCheck1Yes") {
$(".HealthCheck1Yes").show();
}
else if(val === "HealthCheck1No") {
$(".HealthCheck1No").show();
}
}
});
</script>
[编辑 - 修复 JSFiddle]
最佳答案
您错过了最后关闭函数 }) :
$("#HealthCheck1").change(function() {
var val = $(this).val();
if(val === "HealthCheck1Yes") {
$(".HealthCheck1Yes").show();
}
else if(val === "HealthCheck1No") {
$(".HealthCheck1No").show();
}
});
还有一些其他建议可供您考虑:
使用自闭合 HTML 标记的正确语法。使用
<br />而不是</br>.使用正确的缩进(适用于所有文档)可以帮助您更快地找到未关闭的函数和其他错误。
将您的 javascript 放入适当的文件中，然后将其包含在
<script src="myscripts.js"></script>中。这将允许您的代码编辑器(如 intellij)检测简单的结束标记/函数问题。
关于javascript - 使用 javascript 在 HTML 选择的嵌入 DIV 中显示 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60898650/