Question

我正在尝试使用Ajax和PHP实现动态下拉列表。根据第一个选项列表中的索引值，第二个应该给我带有该id的名称列表。

select1.php：

<html>
<head>
<link rel="stylesheet" type="text/css" href="select_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
 $.ajax({
 type: 'post',
 url: 'fetch1.php',
 data: {
  get_option:val
 },
 success: function (response) {
  document.getElementById("new_select").innerHTML=response; 
 }
 });
}

</script>

</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center>
<div id="select_box">
 <select onchange="fetch_select(this.value);">
  <option>Select ID</option>
  <?php
  $host = 'localhost';
  $user = 'admin';
  $pass = 'admin';
  $dbname='kancha';
  $conn = new mysqli($host, $user, $pass, $dbname);
  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  } 

  $sql = "select distinct id from test";
  $select= $conn->query($sql);
  if ($select->num_rows > 0) {
    while($row = $select->fetch_assoc()) {
        echo "<option value='".$row['id']."'>".$row['id']."</option>";
       //echo "<option value=>".$row['id']."</option>";
    }
  } else {
    echo "0 results";
  }
  ?>
 </select>

 <select id="new_select">
 </select>

</div>     
</center>
</body>
</html>

fetch1.php

<?php
if(isset($_POST['get_option']))
{
  $host = 'localhost';
  $user = 'admin';
  $pass = 'admin';
  $dbname='kancha';
  $conn = new mysqli($host, $user, $pass, $dbname);
  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  } 

  $id = $_POST['get_option'];
  //echo '$id';
 $sql = "select id, name from test where id='$id'";;
 $find= $conn->query($sql);

 if ($find->num_rows > 0) {
    while($row = $find->fetch_assoc()) {
        //echo "<option>".$row['name']."</option>";
        echo "<option value='".$row['id']."'>".$row['name']."</option>";
    }
  } else {
    echo "0 results";
  }
 exit;
}
?>

我的数据库看起来像这样：

SELECT * from test; 
id  name
1   Name1
2   Name2
1   Name3

第一次下拉工作正常。然而第二次下降不起作用。我也附上了它的截图。跨文件发送数据有什么问题或者是什么？无法弄清楚代码出错的地方。

对于第二个选项列表，当我选择 1 时，我应该将 Name1 和 Name3 作为选项，但我没有。

编辑：更正了select1.php中的javascript

Answer 1

您正在使用错误的变量设置new_select的内容。

应该是response而不是val

更改为：

document.getElementById("new_select").innerHTML=response;

并为返回选项指定值。

<强>像：

echo "<option value='".$row['id']."'>".$row['name']."</option>";

并将您的sql字符串更改为以下内容，以便上述工作。

 $sql = "select id, name from test where id='$id'";

确保正在加载jquery.js包含。

Answer 2

在selectbox中为Option添加值，此时没有从fetch_select（）传递值

动态下拉列表无法正常工作

2 个答案: