如何在提交表单后保留jquery填充的元素和值?

时间:2014-05-04 11:30:10

标签: php jquery forms

我的表单中有一个下拉列表,其中包含2个选项。用户名和城市。如果有人选择用户名2,则Jquery将动态添加用户名选项。同样,如果选择城市,则会添加2个城市选项。

这样可以正常工作,但是一旦表单通过PHP提交到服务器,动态添加的下拉列表和选定的值就会消失。即使在提交表单后,我仍需要保留上次选择的状态。我该如何做到这一点?

例如 - 假设有人选择“城市”,然后他选择科伦坡作为城市选项。表单提交后,我希望表单保留“City”&选择“科伦坡”。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Basic</title>
</head>
<body>
    <form method="post" action="post_jquery_element.php">
        <select name="choice" id="choice">
            <option value="">Select</option>
            <option value="username">Username</option>
            <option value="city">City</option>

        </select>
        <span id="update"></span>
        <input type="submit" name="submit" id="submit" value="Submit">
    </form>


    <script src="jquery-1.11.0.js"></script> 
    <script>
        $(function(){
            $("#choice").change(function(){
                var value=$("#choice").val();
                if(value==="username"){
                    var output="<select name='username' id='username'>";
                    output+="<option>Mike</option>";
                    output+="<option>John</option>";
                    output+="</select>";
                    $("#update").html(output);
                }else if (value==="city") {
                    var output="<select name='city' id='city'>";
                    output+="<option>NY</option>";
                    output+="<option>Colombo</option>";
                    output+="</select>";
                    $("#update").html(output);
                }

            });



        });



    </script>
</body>
</html>

0 个答案:

没有答案