Question

我创建了一个搜索功能，其中每个结果都有2个相关的选择菜单，这些菜单根据搜索结果进行填充。

现在，当搜索结果不止一个时，第一个结果的选择菜单就可以了。 [见链接图片1]

问题出现在第二个结果上。当我从第二个结果的第一个选择菜单中选择和选项时。数据不是放在旁边的选择菜单上，而是放在第一个结果的第二个选择菜单中。[见链接图像2]

我似乎无法解决这个问题。我在这里和网络上搜索了论坛。似乎无法找到解决方案。有人可以请帮助。我希望我已经很好地解释了这个问题。

我的代码：

的index.php

<!DOCTYPE html>
<?php
include("search.php");
?>
<html>
<head>
<title>Search and Drop</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>

<body>
<form action="index.php" method="POST">
  <input type="search" name="search" autocomplete="off" />
</form>
<?php product(); ?>
</body>
<script type="text/javascript" src="ajax.js"></script>
</html>

的search.php

<!DOCTYPE html>
<?php
include("dbcon.php");
?>
<html>
<?php
function product() {
  include("dbcon.php");

  if (isset($_POST['search']))
   {
   $str = $_POST['search'];
   $keywords = preg_replace("#[^0-9a-z]#i","", $str);

   $query = "SELECT * FROM product WHERE product LIKE '%$keywords%'";
   $result = mysqli_query($conn,$query);
   $count = mysqli_num_rows($result);
   if ($count > 0)
   {
     while($row = mysqli_fetch_array($result))
     {

       echo '<option value="$row["pro_id"]">'.$row["product"].'</option>';
       containers($row['pro_id']);

     }
   }else
      echo "Nothing";
   }
}

function containers($parent_id) {
?>
<select id="containers" onchange="getSizes(this.value)">
  <option value="0">Choose</option>
  <?php
  include ('dbcon.php');

  $select = mysqli_query($conn, "SELECT * FROM product, container
  WHERE ($parent_id = product.pro_id) AND ($parent_id = container.pro_id)");
  ?>
  <?php
  while ($row = mysqli_fetch_assoc($select)) {
    ?>
      <option value="<?php echo $row["con_id"]; ?>"><?php echo $row["container"]; ?></option>
    <?php

  }
  ?>
</select>
<select id="sizes"  onchange="getQuan(this.value);"></select>


<?php
}
?>
</html>

get_sizes.php

<!DOCTYPE html>
<html>
<?php

include("dbcon.php");

$query = "SELECT * FROM sizes WHERE con_id='".$_POST["con_id"]."'";
$result = $conn->query($query);
?>
<option value="0">Choose</option>
<?php
  while ($rs=$result->fetch_assoc()) {
    ?>
    <option value="<?php echo $rs["size_id"]; ?>"><?php echo $rs["sizes"]; ?></option>
    <?php
    }
    ?>
    </html>

ajax.js

//function to show and hide sizes select menu
$(document).ready(function(){
$('#containers').change(function() {
  var value = $(this).val();
      if (value == 0) {
            $('#sizes').hide();
            $('#quantity').hide();
      }else {
          $('#sizes').show();
      }
   });
  });

  //function to pull data from database onto sizes select menu
  function getSizes(val) {
  $.ajax({
    type:"POST",
    url:"get_sizes.php",
   data:'con_id='+val,
   success: function(data){

        $("#sizes").html(data);
        $("#quantity").html('<option>Choose<option>');
    }
  });
}

在PHP和AJAX中使用2个相关的选择菜单搜索结果

0 个答案: