javascript - 页面刷新后无法根据所选选项显示表单-6ren

javascript - 页面刷新后无法根据所选选项显示表单

转载作者：行者123 更新时间：2023-12-03 09:29:29

我有两个表单，我想在从下拉菜单中选择后显示它们...

下面是代码...索引.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        
        }
    }
}