Question

问题：

如果我从选择选项中仅选择状态，则单击提交按钮而不选择城市，然后进行城市（选择标记）验证，但为什么城市选择标记选项被清除

在我犯错的地方帮我朋友：

<?php

$state=$city="";
$stateErr=$cityErr="";

if ($_SERVER['REQUEST_METHOD']== "POST") {
   $valid = true;

/*State Validation starts here*/     
 if(empty($_POST["parent_selection"]))
{
    $stateErr="*State is Required";
        $valid=false;

}

elseif(empty($_POST["child_selection"]))
    {
        $cityErr="* City is required";
        $valid=false;
    }


    else
    {
     $state=test_input($_POST["parent_selection"]); 
     $city=test_input($_POST["child_selection"]); 
    } 


function test_input($data)
    {
     $data = trim($data);
     $data = stripslashes($data);
     $data = htmlspecialchars($data);
     return $data;
    }
}
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">  
$(document).ready(function(){
    var ArunachalPradesh = [
    {display: "---Please Select---", value: "" }, 
    {display: "Itanagar", value: "Itanagar" }, 
    {display: "Arunachal Pradesh - Other", value: "Arunachal Pradesh - Other" }, 
    ];

var Assam = [
    {display: "---Please Select---", value: "" }, 
    {display: "Guwahati", value: "Guwahati" }, 
    {display: "Silchar", value: "Silchar" }, 
    {display: "Assam - Other", value: "Assam - Other" },
    ];

    $("#parent_selection").change(function() {
        var parent = $(this).val(); //get option value from parent 

        switch(parent){ //using switch compare selected option and populate child
         case 'ArunachalPradesh':
                list(ArunachalPradesh);
                break;              
              case 'Assam':
                list(Assam);
                break;
                 default: //default child option is blank
                $("#child_selection").html('');  
                break;
           }
});
function list(array_list)
{
    $("#child_selection").html(""); //reset child options
    $(array_list).each(function (i) { //populate child options 
        $("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
    });
}

});
</script>

<title>Untitled Document</title>
</head>

<body>
<form action="select1.php" method="post">

State :<select name="parent_selection" id="parent_selection">
<option label="-- Please Select --"></option>
   <option value="ArunachalPradesh" <?php if(isset($_POST["parent_selection"]) && $_POST["parent_selection"] == "ArunachalPradesh") { ?> selected="selected" <?php }  ?>>ArunachalPradesh</option>
     <option value="Assam" <?php if(isset($_POST["parent_selection"]) && $_POST["parent_selection"] == "Assam") { ?>
        selected="selected" <?php } ?>>Assam</option>
    </select><?php echo $stateErr?><br />
City : <select name="child_selection" id="child_selection">
</select><?php echo $cityErr?><br />
<input type="submit" value="submit"/>

</form>
</body>
</html>

Answer 1

将您的javascript更改为此

    <script language="javascript" type="text/javascript">  
    $(document).ready(function(){
        var ArunachalPradesh = [
        {display: "---Please Select---", value: "" }, 
        {display: "Itanagar", value: "Itanagar" }, 
        {display: "Arunachal Pradesh - Other", value: "Arunachal Pradesh - Other" }, 
        ];

    var Assam = [
        {display: "---Please Select---", value: "" }, 
        {display: "Guwahati", value: "Guwahati" }, 
        {display: "Silchar", value: "Silchar" }, 
        {display: "Assam - Other", value: "Assam - Other" },
        ];

    jQuery(window).on("load", function(){

      $('#parent_selection').change();

    });

        $("#parent_selection").on('change',function() {
           // var parent = $(this).val(); //get option value from parent 
            var parent = document.getElementById("parent_selection").value;
            switch(parent){ //using switch compare selected option and populate child
             case 'ArunachalPradesh':
                    list(ArunachalPradesh);
                    break;              
                  case 'Assam':
                    list(Assam);
                    break;
                     default: //default child option is blank
                    $("#child_selection").html('');  
                    break;
               }
    });
    function list(array_list)
    {
        $("#child_selection").html(""); //reset child options
        $(array_list).each(function (i) { //populate child options 
            $("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
        });
    }

    });

    </script>

依赖选择标记在提交后被清除

1 个答案: