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

Question

我的数据库中有2个表Fruits

id  name
1   apple
2   mango

蔬菜

id  name
1   brinjal
2   ladyfinger

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

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

我想做的是，当用户从第一个下拉菜单中选择一个值时，第二个下拉列表中的项目应相应地填充。

EG：如果用户选择水果，则第二个下拉列表应包含水果表中的项目。

谁能告诉我该怎么做

Answer 1

如果您可以使用jQuery或Javascript，那么在第一个选择上将有一个.onchange（）侦听器。

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

编辑-代码

首次下载并包含jQuery

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

然后给您选择的ID（让我们说typePicker）并添加更改事件

$( "#typePicker" ).change(function() {
  retrieveList($(this).val());
});

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

现在我们编写该函数restoreList

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。

Answer 2

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

Answer 3

您获取两个下拉菜单的简单方法是：一个用于蔬菜，另一个用于水果。 给他们diff diff id。 1. #fruitdropdown 2. #vegdropdown

$（“ #typePicker”）.change（function（）{

var type = $（this）.val（）;

if（type =='fruit'）{

$（“＃fruitDropdown”）;

}

其他{

$（“＃vegDropdown”）;

}}）;