Question

我一直在努力使它起作用，但没有成功。研究了许多教程和视频，但仍然无法正常工作。

我的数据库中有一个区域表，其中region_id(PK)和region_name为列。我还用center_id(PK)，center_name和region_id(FK)

居中

region_id是中心表上的外键

我有一个register.php文件，该文件从DB和Ajax.php中获取数据

仅是工作区域的选择下拉列表。所选区域下的中心将不会显示在“中心选择”下拉菜单中。

Register.php

<?php
session_start();
require_once $_SERVER['DOCUMENT_ROOT'] . '/soap/includes/server.php';
?>

<html>
<body>
<div class="p-t-31 p-b-9">
                    <span class="txt1">
                        Region 
                    </span>
                </div>
                <div class="wrap-input100 validate-input" data-validate 
 = "Region is required">
                <span class="focus-input100"></span>

                    <select class='input100' name='region'>
                    <option value disabled selected>Select 
Region</option>
                        <?php  
                            $sql = mysqli_query($con,"SELECT * FROM 
region");
                                while($row=mysqli_fetch_array($sql))
                                {
                            echo '<option 
value="'.$row['region_id'].'">'.$row['region_name'].'</option>';
                                } 
                        ?>
                    </select>


                </div>

                <br>
                <span class="error"><?php echo $regionError;?></span>


                <div class="p-t-31 p-b-9">
                    <span class="txt1">
                        Center 
                    </span>
                </div>
                <div class="wrap-input100 validate-input" data-validate 
= "Center is required">
                <span class="focus-input100"></span>
                    <select class='input100' name='center'>

                                <option value="">Select Center</option>
                    </select>
                <script 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
   </script>

                    <script type="text/javascript">
                        $(document).ready(function()
                            {
                        $(".region").change(function()
                            {
                        var region_id=$(this).val();
                        var post_id = 'id='+ region_id;

                        $.ajax
                            ({
                            type: "POST",
                            url: "ajax.php",
                            data: post_id,
                            cache: false,
                        success: function(centers)
                            {
                                $(".center").html(centers);
                            } 
                        });

                        });
                        });
                    </script>
                </div>

                <br>
                <span class="error"><?php echo $centerError;?></span>

Ajax.php

<?php
  require_once $_SERVER['DOCUMENT_ROOT'] . '/soap/includes/server.php';
   if($_POST['id']){
   $id=$_POST['id'];
   if($id==0){
       echo "<option>Select Center</option>";
   }else{
       $sql = mysqli_query($con,"SELECT * FROM center WHERE 
       region_id='$id'");
   while($row = mysqli_fetch_array($sql)){
    echo '<option 
    value="'.$row['center_id'].'">'.$row['center_name'].'</option>';
       }
    }
  }
 ?>

 </body>
 </html>

Answer 1

谢谢你们。

您指出了我的错误。我只是在两个选择字段的“ input100”类中添加了class ='region'和'center'。

感谢您的帮助。我很感激。

Answer 2

</script>

                    <script type="text/javascript">
                        $(document).ready(function()
                            {
                        $(".region").change(function()
                            {
                        var region_id=$(this).val();
                        var post_id =region_id;
                         var post_id=JSON.stringify(post_id);  

                        $.ajax
                            ({
                            type: "POST",
                            url: "ajax.php",
                            data:{"id":post_id},
                            cache: false,
                        success: function(centers)
                            {   
                                var centers=JSON.parse(centers);  
                                $(".center").html(centers);
                            } 
                        });

                        });
                        });
    </script>

如何根据父下拉菜单选择动态选择子下拉菜单

2 个答案: