簡體   English   中英

頁面刷新后無法顯示基於所選選項的表單

[英]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        
        }
    }
}

傑斯菲德爾

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM