Question

我正在使用PDO从表单中删除Wines。目前，我遇到了jQuery代码的问题，列出了基于下拉列表选择的更多细节。该代码允许用户从下拉列表中选择葡萄酒，一旦选择了葡萄酒，下面的区域将列出所选葡萄酒的详细信息，例如wineID，wineCountry，wineColour等。下拉列表显示正常，但是下面没有进一步细节的区域没有显示。我在此之前编写了类似的代码并且没有任何问题。

删除Wine Page

<!--JQuery Library-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<?php
  $wineListing = [];
        $sql= 'SELECT *
                FROM Wine';
        $result = $pdo->query($sql);

        while ($row = $result->fetch(PDO::FETCH_ASSOC)) {

        $wineListing[$row['description']][] = $row;
        }
  ?>

<div class="removeWine">
 <table>
  <center> <span>Wine Management<span></center><P><P><P>
   <hr>
  <center> <span>Remove Wine<span></center><P><P><P>
  </br>

<?php if ($status): ?>
  <p style="color: green"><?=$status?></p>
<?php endif ?>

    <form action= "" method="POST">
    <tr>
      <td> View Wines:     </td>

      <td>
        <select id='wineNameSelect' name='wineName'>

          <?php

          foreach($wineListing as $wineID => $description) {

            $json = json_encode($description);

            echo "<option data-descriptions='$json' value='" . $description[0]['wineID'] ."'>" . $wineID ."</option>";
          }
          ?>
        </select>

      </td>
    </tr>

    <tr>
      <td>
      Wine Details
      </td>
      <td>
          <ul id="results">
          </ul>
      </td>
    </tr>

  </table><p><br>

  <center><input type="submit" name= "removeWineButton" value="Remove Wine"></center><p><p><p><p>
  </form>

脚本标记

<script>
$(document).ready(function(){
$("#wineNameSelect").prepend("<option value='' selected='selected'>   </option>");
});
$('#wineNameSelect').change(function(){
var description = $(this).find(':selected').data('description');
console.log(description);
var content = "";
$.each(description, function(key,value){
  content += "<li>"+value.wineID+"</li>"
        +"<li>"+value.description+"</li>"
});
  $("#results").html(content);
});
</script>

Answer 1

您需要在select标签上绑定onchange事件，然后启动ajax调用以检索所选葡萄酒的详细信息，在ajax调用中传递wine id。请参阅下面的代码。

"Resource": [
    "arn:aws:s3:::test-bucket",
    "arn:aws:s3:::test-bucket/*"
]

我已在您的选择标记上添加了wine-id属性

如何在下拉列表中列出所选项目的详细信息以使用jQuery显示在下面？

1 个答案: