使用 PHP 和 Javascript 的下拉 onchange 方法答案

【问题标题】：Dropdown onchange method using PHP and Javascript使用 PHP 和 Javascript 的下拉 onchange 方法
【发布时间】：2012-12-14 21:20:39
【问题描述】：

我有两个从 MySQL 数据库中读取数据的下拉菜单。我使用 PHP 连接到数据库。第二个下拉菜单应根据第一个下拉菜单上的选择进行填充。这个过程在我看来如下（如果我错了，请纠正我）：

PHP 部分连接到 MySQL 数据库并填充下拉列表1。
用户在 dropdown1 上选择一个值并调用 onchange 事件。
在 onchange 函数（它是 Javascript）中，会向 MySQL 数据库发送一个查询，以根据 dropdown1 的选择来获取 dropdown2 的值（这里又是 PHP，对吗？）。
dropdown2 被填充。

我不知道如何同时使用 Javascript 和 PHP 来完成这项任务（上面的第 3 点）；或者也许这根本不是这样做的方法。请指教！

这是我的代码。正如您在下面看到的，我在 PHP 代码中放置了一个 Javascript 函数，我认为这是错误的。这就是我卡住的地方！

<php
$sql="SELECT distinct category FROM table1";
$result=mysql_query($sql);

$optionsCat="";
while($row = mysql_fetch_row($result)){
    $optionsCat.="<option value=\"$row[0]\">$row[0]</option>";
}

function genSubCat($catID){
$sql="SELECT distinct subcategory FROM table1 where category=".$catID;
$result=mysql_query($sql);

$optionsSubCat="";
while($row = mysql_fetch_row($result)){
    $optionsSubCat.="<option value=\"$row[0]\">$row[0]</option>";
}
}

?>
<select name="catDropDown" onChange="genSubCat(this)">
    <option value="0">Select category</option>
    <?php echo $optionsCat?>
</select>
<select name="subcategoryDropDown">
    <option value="0">Select subcategory</option>
    <?php echo $optionsSubCat?>
</select>

【问题讨论】：

你试过 jQuery 吗？在大多数情况下，它使这类事情变得更容易。（当然使用 javascript 并没有错！）
不，我没有。实际上这就是我想要理解的。我有点困惑什么更常见用于此类任务。
一旦我弄清楚了这一点，我仍然需要知道 php 和 javascript/jquery 是如何相互传递值的（看数字 3）。
jQuery 只是一个 javascript 库，所以它下面总是你正在执行的 javascrpit，它有一堆非常有用的函数可以在这种情况下帮助你，如果你想看看它是什么，您可以将其中一个标签更改为 jQuery 并阅读人们回答的代码，这真的很容易学习。作为旁注，我建议您发布一些您尝试做的代码，人们总是很欣赏这一点，并使他们更容易回答。
我刚刚添加了我的代码。请看主帖！

标签： javascript php drop-down-menu dom-events onchange

【解决方案1】：

这里我们有一个简单的页面，上面有输入。在其中输入一个单词，然后单击输入。 Ajax 将调用 myphp.php 脚本并返回您在原始分区下方输入的相同单词。

test.html:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
$("#faq_search_input").blur(function(){
   var faq_search_input = $(this).val();
   var dataString = 'keyword='+ faq_search_input;
   if(faq_search_input.length>1){
      $.ajax({type: "GET", url: "myphp.php", data: dataString,
              success: function(server_response) {
                 document.getElementById("searchresultdata").style.display = "block";
                 $('#searchresultdata').html(server_response).show();
              }
          });
       }
       return false;
   });
});

</script>
  </head>
  <body>
<div class="searchholder">
    <input  name="query" class="quicksearch" type="text" id="faq_search_input" />
<div id="searchresultdata" class="searchresults" style="display:none;"> </div>
</div>
  </body>
</html>

myphp.php：

 <?PHP
    echo $_GET['keyword'];
 ?>

【讨论】：

【解决方案2】：

我认为您应该首先学习如何使用基于网络的语言。您提供的代码完全错误。您正在尝试通过 HTML 访问 PHP 代码？我的意思是来吧！

第一条规则：基于服务器的语言不能与基于客户端的语言进行通信。

您必须发送请求并获取响应，而您想要执行该下拉操作的方式是将请求发送到 PHP 代码并从中获取相关数据。正如 Trufa 在评论中所说，您可能想查看 jQuery 库，但在此之前我认为您需要查看 AJAX。

【讨论】：

嘿，每个人都必须从某个地方开始，另外，我建议使用 jQuery 的原因特别是因为 AJAX，因为 AJAZ 很烂:) 而 jQuery 让它变得愚蠢简单......
无意冒犯！我之所以这么说，是因为这真的很简单。