我有两个表单，我想在从下拉菜单中选择后显示它们...
下面是代码... 索引.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Displaying Extra Fields With jQuery And Enhanced With jQuery Cookies - Onextrapixel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/control.js"></script>
</head>
<body>
<label for="db">Type</label>
<select name="clinical" id="dbType">
<option>Select Type</option>
<option value="d" selected="selected">Doctor</option>
<option value="c">Clinical Manager</option>
</select>
<form id="clinical" style="display:none;">
<label for="specify">Clinic Name:</label>
<input type="text" name="specify" placeholder="Clinic Name"/><br />
<label for="specify">Clinic Add:</label>
<input type="text" name="specify" placeholder="Clinic Add"/><br />
<label for="specify">Clinic Phone:</label>
<input type="text" name="specify" placeholder="Clinic Phone"/><br />
<label for="specify">Clinic KKM:</label>
<input type="text" name="specify" placeholder="Clinic KKM"/><br />
<label for="specify">Clinic Admin Name:</label>
<input type="text" name="specify" placeholder="Clinic Admin Name"/><br />
<label for="specify">Admin Hp num:</label>
<input type="text" name="specify" placeholder="Admin Hp num"/><br />
<label for="specify">Email add:</label>
<input type="text" name="specify" placeholder="Email add"/><br />
<label for="specify">Password:</label>
<input type="text" name="specify" placeholder="Password"/>
</form>
<form id="doctor">
<label for="specify">First Name</label>
<input type="text" name="specify" placeholder="First Name"/></br></br>
<label for="specify">Last Name</label>
<input type="text" name="specify" placeholder="Last Name"/></br></br>
<label for="specify">DOB</label>
<input type="text" name="specify" placeholder="DOB"/></br></br>
<label for="specify">Contact</label>
<input type="text" name="specify" placeholder="Contact"/></br></br>
<label for="specify">Email</label>
<input type="text" name="specify" placeholder="Email"/></br></br>
<label for="specify">MMC</label>
<input type="text" name="specify" placeholder="MMC"/></br></br>
<label for="specify">APC</label>
<input type="text" name="specify" placeholder="APC"/>
</form>
</body>
</html>
这是 JavaScript...
$(document).ready(function(){
$('#dbType').change(function(){
if ($('#dbType').val() == "c" ) {
$("#clinical").show();
$("#doctor").hide();
} else {
$("#clinical").hide();
$("#doctor").show(); //Slide Up Effect
}
});
});
代码运行正常... 但问题是，当我刷新页面时，它不接受最新选择的选项...并且仅显示默认表单...
请帮忙..
最佳答案
试试这个代码:
$(document).ready(function(){
if(localStorage.getItem("type") === "c") {
$("#dbType").val("c");
$("#clinical").show();
$("#doctor").hide();
} else {
$("#clinical").hide();
$("#doctor").show(); //Slide Up Effect
}
$('#dbType').change(function () {
showHide();
localStorage.setItem("type", $('#dbType').val());
});
function showHide() {
if ($('#dbType').val() == "c") {
$("#clinical").show();
$("#doctor").hide();
} else {
$("#clinical").hide();
$("#doctor").show(); //Slide Up Effect
}
}
}
关于javascript - 页面刷新后无法根据所选选项显示表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31562715/