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

Question

           <?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”，我想执行一些查询如果我选择“早上”，我想执行一些查询

Answer 1

这是总体思路，使用 jQuery 来缩短代码。在 select 的 change 事件上获取所选 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>