刷新页面后无法显示基于所选选项的表单
not able to display form based on selected option after page refresh
我有两个表单,我想从下拉菜单选择后显示…
下面是代码…index . 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
}
}
}
Jsfiddle
相关文章:
- 使用Javascript获取所选选项ID
- 正在获取所选选项数据
- 从动态创建的html选择中选择所选选项
- Jquery:如何获取所选选项全文(带空格)
- 如何使用JS禁用表行,并在MYSQL中插入所选选项
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 如何根据所选选项值重定向表单操作
- 如何取消选择所选选项并将JqueryMobile中选择的值刷新为1st
- 更新:仅根据单选按钮和所选选项选择特定项目
- HTML SELECT-使用JavaScript按VALUE更改所选选项
- 更改所选选项更改时的页眉和隐藏文本字段
- 如何使用CSS设置所选选项的样式,而不设置所有其他选项的样式
- 设置所选选项JQuery
- 在ractive.js中获取所选选项文本
- 为什么ng模型重置所选选项
- 获取所选选项的Javascript在Webkit/FF中有效,但在IE中无效
- 获取最接近所选选项的最快方式
- 如何获取上一个/下一个非禁用选项的索引(相对于所选选项)
- 如何显示特定于所选下拉选项的项
- 如何显示特定于所选下拉选项的文本块