我目前正在开发一个应该接受用户输入的网络表单。婚姻表格询问用户他们目前是否已婚，如果他们回答"is"，那么假设会在下面出现另一个下拉类型的问题，询问“你结婚多少次？”等等等等。我创建了决策声明，但是当我测试婚姻形式并输入"is"时，没有弹出任何其他信息。
预期的结果是，当用户回答"is"时，另一个问题应该出现在下方。
婚姻.php
<!doctype html>
<html lang="en">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.active {
background-color: #4CAF50;
color: white;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
<head>
</head>
<body style="text-align:center;">
<div style="margin:0 auto; text-align:center;">
<img src="../Images/CBH Logo 200px.png" alt="CBH Logo" height="80" width="80">
</div>
<h2>Johnson Behavioral Health Mental Evaluation Intake Application</h2>
<br>
<div class="navbar">
<a>Education History</a>
<a class="active" href="Marital.php">Marital History</a>
<a>Employment History</a>
<a>Military History</a>
<a>Substances History</a>
<a>Social/Personal History</a>
<a>Physical Health History</a>
<a>Mental Health History</a>
</div>
<form method="POST" id="marital_form" onsubmit="SetSectionComplete('marital')">
<br></br>
<table style="margin:0 auto;">
<tr>
<td class="Question">
Are you currently married?
</td>
<td style="width:100px;">
<select type="text" id="married" name="married" style="width:100%;" class="needs_saved_marital" required>
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="evermarried_row">
<td>
Have you ever been married?
</td>
<td>
<select type="text" id="evermarried" name="evermarried" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanymarriages_row">
<td>
How many times have you been married?
</td>
<td>
<select type="text" id="howmanymarriages" name="howmanymarriages" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5 or more'>5 or more</option>
</select>
</td>
</tr>
<tr style="display:none" id="divorced_row">
<td>
Have you ever been divorced?
</td>
<td>
<select type="text" id="divorced" name="divorced" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="widowed_row">
<td>
Are you widowed?
</td>
<td>
<select type="text" id="widowed" name="widowed" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="children_row" required>
<td>
Do you have any children?
</td>
<td>
<select type="text" id="children" name="children" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanychildren_row">
<td>
How many children do you have?
</td>
<td>
<select type="text" id="howmanychildren" name="howmanychildren" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7 or more'>7 or more</option>
</select>
</td>
</tr>
</table>
<table style="margin:0 auto;">
<tr>
<td><button class="reset_button" type="reset" value="Reset" id="marital_reset">Clear Marital</button></td>
<td><input type="button" value="Back!" onclick="history.back()"></td>
<td><button class="save_button" formaction="Employment.php" id="marital_save" name="marital_save" value="Submit">Next</button></td>
</tr>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="Marital.js">
function Marital_Validation() {
$('#marital_save').css('border-color', '#163c6a');
$('#marital_save').css('background', 'none');
$('#marital_save').css('background-color', 'green');
$('#marital_save').css('color', 'white');
$('#marital_save').text('Saved');
$('#marital_indicator').css('background-color', 'green');
}
</script>
</body>
</html>
婚姻.js
/*
Marital variables:
married
evermarried
howmanymarriages
divorced
widowed
children
howmanychildren
*/
$(function(){
$("#married").change(function(){
var option=$("#married").val();
if (option==='No'){
$("#evermarried_row").show();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#evermarried").change(function(){
var option=$("#evermarried").val();
if (option==='No'){
$("#children_row").show();
$("#howmanymarriages_row").hide();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#howmanymarriages").change(function(){
var option=$("#howmanymarriages").val();
var married=$("#married").val();
if (option==='1'){
if (married==='Yes'){
$("#children_row").show();
$('#divorced_row').hide();
$("#widowed_row").hide();
}
if (married==='No'){
$('#divorced_row').show();
}
}
if (option==='2' || option==='3' || option==='4' || option==='5 or more'){
$('#divorced_row').show();
}
});
$("#divorced").change(function(){
var option=$("#divorced").val();
var married=$("#married").val();
var timesmarried=$("#howmanymarriages").val();
if (option==='No'){
$("#widowed_row").show();
}
if (option==='Yes'){
if (timesmarried==='1'){
$("#widowed_row").hide();
$("#children_row").show();
}
if (timesmarried==='2' || timesmarried==='3' || timesmarried==='4' || timesmarried==='5 or more'){
$("#widowed_row").show();
}
}
});
$("#widowed").change(function(){
$("#children_row").show();
});
$("#children").change(function(){
var option=$("#children").val();
if (option==='No'){
$("#howmanychildren_row").hide();
}
if (option==='Yes'){
$("#howmanychildren_row").show();
}
});
$(".needs_saved_marital").change(function(){
var married=$("#married").val();
var evermarried=$("#evermarried").val();
var howmanymarriages=$("#howmanymarriages").val();
var divorced=$("#divorced").val();
var widowed=$("#widowed").val();
var children=$("#children").val();
var howmanychildren=$("#howmanychildren").val();
if (married==='Yes'){
$("#evermarried").attr('required',false);
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#howmanymarriages").attr('required',true);
}
if (married==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#evermarried").attr('required',true);
}
if (evermarried==='Yes'){
$("#howmanymarriages").attr('required',true);
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (evermarried==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#children").attr('required',true);
}
if (howmanymarriages==='2' || howmanymarriages==='3' || howmanymarriages==='4' || howmanymarriages==='5 or more'){
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (children==='Yes'){
$("#howmanychildren").attr('required',true);
}
if (children==='No'){
$("#howmanychildren").attr('required',false);
}
});
});
最佳答案
它按预期工作。检查这个 fiddle :https://jsfiddle.net/ax6kfjvz/
我猜你在脚本之后包含了 jQuery。或者您根本不包括 jQuery。试试这个模板:
<!doctype html>
<html lang="en">
<head>
<title>Couples Issues</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="js/your-awesome-script.js"></script>
</body>
</html>
使用库时，必须在脚本之前包含它们，否则浏览器不知道这个函数 $() 来自哪里。
关于Javascript 决策语句无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55997730/