如何根据父下拉列表选择动态选择子下拉列表

qacovj5a 于 2021-06-21 发布在 Mysql

关注(0)|答案(2)|浏览(477)

我一直在努力让这个工作，但没有成功。研究了许多教程和视频，但仍然没有工作。
我的数据库中有一个区域表 region_id(PK) 以及 region_name 作为列。我还把table放在中间 center_id(PK) , center_name 以及
region_id(FK) region_id 外键在中间表上吗
我有register.php文件，它从db和ajax.php获取数据
只有区域的select下拉列表才起作用。选定区域下的中心不会显示在“中心选择”下拉列表中。
单文件

<?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>

mysql php jquery ajax

来源：https://stackoverflow.com/questions/52271058/how-to-dynamically-select-child-dropdown-depending-on-parent-dropdown-selection

2条答案

按热度按时间

new9mtju1#

谢谢你们。
你指出了我的错误。我刚刚在两个select字段的input100类中添加了class='region'和'center'。
谢谢你帮我。我很感激。

赞(0）回复(0）举报 2021-06-21

xpszyzbs2#

</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>

赞(0）回复(0）举报 2021-06-21

我来回答

如何根据父下拉列表选择动态选择子下拉列表

2条答案

相关问题

热门标签

最新问答