php - 让 JavaScript 识别在 HTML 下拉菜单中选择了哪个选项并返回运行 SQL 查询的 PHP 函数

Question

更新:感谢所有快速回复。可能应该澄清一下，我已经让 JQuery 为小部件提供了功能。但这有助于更好地理解 Web 开发中 HTML、Javascript 和 PHP 之间的关系。

我正在尝试将查询数据库并返回一些预先编写的 MySQL 查询的网页放在一起:

我有一些疑问，例如:

function someQuery($connection) {

 $query = "SELECT DISTINCT Column1, Column2
                 FROM TABLE1, TABLE2
                 WHERE TABLE1.Colum1_ID = TABLE2.Colum1_ID";

        if (!($result = @ mysql_query ($query, $connection)))
           showerror();

        if (@ mysql_num_rows($result) != 0) {
           echo "\n<table border=1 width=100%>";

           echo "\n<tr>" .
                 "\n\t<th>Column1</th>" .
                 "\n\t<th>Column2</th>" .
                 "\n</tr>";

           while($row = @ mysql_fetch_array($result)) {

              echo "\n<tr>" .
                    "\n\t<td>{$row["Column1"]}</td>" .
                    "\n\t<td>{$row["Column2"]}</td>";

           }
           echo "\n</table>";
        }

然后我有显示功能的小部件:

   <li class="widget">  
       <div class="widget-top">
          <h3>Query Category</h3>
           <select>
             <option value="1">Query of Interest 1</option>
             <option value="2">Query of Interest 2</option>
             <option value="3">Query of Interest 3</option>
             <option value="4"Query of Interest 4</option>
           </select>
       </div>
       <div class="widget-content">
           <p><?

            ****Would Run Query here ****, but want to check the selections above and run query associated with selected option.

              ?></p>
       </div>
   </li>

所以我的问题是，如何设置它以便用户可以从下拉菜单中选择感兴趣的查询之一，以便运行关联的 PHP 函数，显示用户选择的查询结果？

我进行了大量搜索，惊讶地发现似乎没有任何东西与我在这里尝试做的事情相符，尽管我觉得这是一个相当常规的功能。

Answer 1

最简单的方法是使用来自 SELECT 表单元素的 onChange 事件。触发事件后，您可以调用 AJAX 函数来填充(通过执行服务器端脚本)DIV 标记。

以下示例假定使用 jQuery。

给你的选择元素一个ID

<select id="myselect">
    <option value="1">query 1</option>
    <option value="2">query 2</option>
    <option value="3">query 3</option>
</select>

然后添加一个 jquery 脚本来填充 DIV 标签。

$('#myselect').change(function() {
    $('.widget-content').load('runquery.php?id='+this.options[this.selectedIndex].value);
});