Php 从第一个下拉列表中选择值后，在第二个下拉列表中显示值

我的数据库中有2个表 果实

蔬菜

id  name
1   brinjal
2   ladyfinger

我有一个下拉菜单，其中有两个默认存储的值

<select>
    <option value="fruits">fruits</option>
    <option value="vegetables">vegetables</option>

</select>

果实
蔬菜

我有一段代码，根据要使用的表填充数据库中的下拉列表

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "db";

    $con = mysqli_connect($servername, $username, $password, $dbname);
    if (!$con) {
        die("Connection failed: " . mysqli_connect_error());
    }

    $sql = "SELECT * FROM fruits";
    $result = $con->query($sql); ?>
    <label for="name">Fruit Name: </label>
    <select name="name" id="name" class="form-control">
    <option value="" <?php if(!isset($_POST['name']) || (isset($_POST['name']) && empty($_POST['name']))) { ?>selected<?php } ?>>--Select--</option>
    <?php 
    while($row = $result->fetch_assoc()) { ?>
    <option value="<?php echo $row['name']; ?>" <?php if(isset($_POST['name']) && $_POST['name'] == $row['name']) { ?>selected<?php } ?>><?php echo $row['name']; ?></option>
    <?php } ?>
</select>

水果名称：
>--挑选--
如果您可以使用jQuery或Javascript，那么在第一次选择时将有一个.onchange（）监听器

然后，当它触发时，您使用一些AJAX来获取适当的列表，然后在成功时用响应替换HTML

编辑-代码

首先下载并包含jQuery

<script src="jquery-1.11.1.min.js"></script>

我们在那里调用了一个函数（我称为retrieveList），并传递了select的当前值，它将是您列出的“水果”或“蔬菜”

现在我们编写函数retrieveList

function retrieveList(val) {
 $.ajax({
 type: "POST",
 url: "some.php",
 data: { type: val }
})
.done(function( msg ) {
 $('#select2').html(msg);
});
}

将“select2”替换为第二次选择的ID

另外，“some.php”将是一个php脚本的url，您可以在其中接收$_POST['type']，并使用适当的选项构造一个select。您需要回显您构建的HTML块，然后javascript函数将为您替换HTML。

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#name').change(function(){
              var formData = new FormData($(this)[0]);
             $.ajax({
                 url: 'responceChange.php',
                 type: 'POST',
                 async: false,
                 data: formData,
                 success: function(data){
                     $('#div1').html(data)
              },
              cache: false,
              contentType: false,
              processData: false
              });

              return false;

          });
      });
</script>

$（文档）.ready（函数（）{
$（'#name'）.change（function（）{
var formData=新formData（$（此）[0]）；
$.ajax({
url:'responceChange.php'，
键入：“POST”，
async:false，
数据：formData，
成功：功能（数据）{
$（'#div1'）.html（数据）
},
cache:false，
contentType:false，
processData:false
});
返回false；
});
});
获取两个下拉列表的简单方法一个是蔬菜，一个是水果。
给他们不同的id。
1. #水果下拉列表
2. #蔬菜下拉列表

$（“#类型选择器”）.change（函数（）{

var type=$（this.val（）

如果（类型=‘水果’）{

$（“水果下拉列表”）

}

否则{

$（“蔬菜下拉列表”）

}
});
 试着用jquerycan u plz告诉我怎么做，我对jquery/javascriptI没有一个正确的理解我已经编辑了答案，包括一些代码示例如果你对jquery一无所知，那么你很难做到这一点。您必须使用jQuery和ajax。jQuery帮助获取selec框值ajax帮助重定向到特定页面，并根据选择值和返回数据触发查询，然后您必须通过jQuery将这些数据附加到选择框2。。。。。
function retrieveList(val) {
 $.ajax({
 type: "POST",
 url: "some.php",
 data: { type: val }
})
.done(function( msg ) {
 $('#select2').html(msg);
});
}

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#name').change(function(){
              var formData = new FormData($(this)[0]);
             $.ajax({
                 url: 'responceChange.php',
                 type: 'POST',
                 async: false,
                 data: formData,
                 success: function(data){
                     $('#div1').html(data)
              },
              cache: false,
              contentType: false,
              processData: false
              });

              return false;

          });
      });
</script>