Question

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

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>

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

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

任何人都可以告诉我该怎么做

Answer 1

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

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

编辑 - 代码

首先下载并包含jQuery

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

然后给你选择一个ID（比方说typePicker）＆amp;添加更改事件

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

我们在那里调用了一个函数（我将其命名为retrieveList），并传递了select的当前值，它将是你所列出的“fruits”或“vegetables”。

现在我们编写该函数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。

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”）;

} }）;

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

3 个答案: