如何从动态生成的下拉值中选择值并在 php 中对其执行查询答案

【问题标题】：How to select value from dynamically generated dropdown values and perform queries to it in php如何从动态生成的下拉值中选择值并在 php 中对其执行查询
【发布时间】：2017-05-27 22:02:26
【问题描述】：

           <?php
             echo '<form class="farm" name=f1 id=f1 method="POST" action="'.$_SERVER['PHP_SELF'].'">
                <table class="table table-bordered table-hover table-striped" style="width:35%;">
                    <tr align="center">
                        <div class="prodselectbox">
                        <div class="floatleft cat"></div>
                        <div class="floatleft catid">
                        <td>';
                        $query = "select name from profiles ";
                        $sql = mysqli_query($conn, $query);
                        echo "<select id='selectcat' name='selectcat' class='form-control'>";
                        echo "<option value='' class='rhth'>Select Category</option>";
                        echo "<option class='all' value='ALL' >ALL</option>";
                        while($row = mysqli_fetch_array($sql)) {
                        echo "<option class='pre-offer' value='".$row['name']."'>".$row['name']."</option>";
                        }
                        echo "</select>";
                        ?>
                     </td>
                    </tr>
                    </div>
                    </div>
                   </table>
                  </form>

   Profiles Table
  id      name
   1     Hello
   2    Morning

我想检查从下拉列表中选择的值是否 = 从表中动态生成的值并对其执行查询。如果我从下拉列表中选择“Hello”，我想执行一些查询如果我选择“早上”，我想执行一些查询

【问题讨论】：

听起来您需要将 javascript change 事件处理程序绑定到 select 标记，获取所选 value 的 value 并向 PHP 脚本发出 ajax 请求以运行您的查询。
天哪，听起来很复杂 :)
不，不是。你可以使用 jquery 还是需要 vanilla javascript？
我可以使用 jquery

标签： javascript php html css mysql

【解决方案1】：

这是一个总体思路，使用 jQuery 来缩短代码。在change 事件中为select 获取选定option 的值，然后注释掉一些您可能用来构建查询的逻辑，然后是一个示例AJAX POST 请求到您拥有的一些PHP 脚本，传递查询以及success 回调。这很简单。这是$.ajax() 上的资源以获取其他选项 - http://api.jquery.com/jquery.ajax/

$("#selectcat").on("change", function() {
  var val = $(this).find("option:selected").val(),
      query = { name: "", location: "" };
  
  console.log(val);
  /*
  if (val == 'Hello') {
    query.name = "john";
    query.location = "boston";
  } else if (val == 'Morning') {
    query.name = "billybob";
    query.location = "texas";
  }
  $.ajax({
    url: "someurl.php",
    method: "POST",
    data: query,
    success: function(result) {
      $("#someElement").html(result);
    }
  });
  */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectcat' name='selectcat' class='form-control'>
  <option disabled selected>choose</option>
  <option value="foo">foo</option>
  <option value="bar">bar</option>
</select>

【讨论】：