在PHP中动态填充下拉列表

在PHP中动态填充下拉列表,php,select,drop-down-menu,option,Php,Select,Drop Down Menu,Option,我有一个小PHP页面,其中包含两个下拉列表 我需要根据第一个下拉列表中选择的结果填充第二个。。。。这可能吗?换句话说,我需要使用从第一个下拉列表中选择的值,并在用于填充第二个下拉列表的dB查询中使用它(但这应该在选择第一个下拉列表时填充) 如果这是可能的,请提供任何提示?(您可以假设我能够填充数据库中的第一个下拉列表) 谢谢您必须使用AJAX将第一个下拉列表的选择发送到服务器。然后您可以查询数据库并生成第二个下拉列表,然后将其发送回用户。选项1:将第二个选择的数据作为隐藏元素或JS对象嵌入文档中

我有一个小PHP页面,其中包含两个下拉列表

我需要根据第一个下拉列表中选择的结果填充第二个。。。。这可能吗?换句话说,我需要使用从第一个下拉列表中选择的值,并在用于填充第二个下拉列表的dB查询中使用它(但这应该在选择第一个下拉列表时填充)

如果这是可能的,请提供任何提示?(您可以假设我能够填充数据库中的第一个下拉列表)


谢谢

您必须使用AJAX将第一个下拉列表的选择发送到服务器。然后您可以查询数据库并生成第二个下拉列表,然后将其发送回用户。

选项1:将第二个选择的数据作为隐藏元素或JS对象嵌入文档中。在第一个下拉列表上添加
更改
事件处理程序elect将填充第二个select。分开的列表有一个

选项2:使用AJAX。当第一个select更改时,向服务器请求第二个select的内容,然后填充它。使用JS库(如jQuery),这变得非常简单

$('select#one').change(
  function (evt) {
    $('select#two').load('/thing/'+this.value);
  }
);
“/thing/”标识服务器端脚本以基于“”生成项目列表(使用Web服务器的重写功能解析实际脚本的URL路径)。您可以简单地让它始终生成元素,但更好的设计是包含一种指定结果格式的方法,这样它就可以使用JSON或其他格式将列表输出为
  • $('select#one').change(
      function (evt) {
        $('select#two').load('/thing/'+this.value, {fmt: 'option'});
      }
    );
    

    您需要一个异步回调服务器,而不需要重新加载页面。(我怀疑您是否真的想要一个发回服务器的按钮)所以AJAX就是可以做到这一点的。向第一个下拉菜单的
    onchange
    事件处理程序添加AJAX调用,该事件处理程序将选择内容发布回服务器并返回第二个下拉菜单的内容。当AJAX调用返回新值时,您将使用它为第二个下拉菜单构建内容。大部分操作都是在当然,除了保留在PHP中的实际服务器部分之外,Javascript还有两种方法。老派的“选择一个选项并提交以重建页面”方法(几乎普遍适用)和新式的AJAX方法,可以在不刷新页面的情况下加载第二个下拉列表的内容

    这两种方法都有优点/缺点,因此归根结底就是对您的目的来说最好的方法。oldschool方法根本不需要任何javascript,但由于它在服务器上来回传递表单,您将看到“清除窗口,然后重新绘制页面”的闪烁


    AJAX方法绕过刷新闪烁,但在禁用Javascript的浏览器上也不起作用。它确实需要更多的客户端代码来处理AJAX调用和下拉列表填充,但两种方法的服务器端代码几乎相同:相同的查询、相同的检索循环、不同的输出hods.

    @outis有很好的点使用
    。在jquery中更改
    ,否则在
    选择
    代码中使用
    onchange
    事件

    
    A.
    .
    .
    Z
    函数myfunc(){
    //编写代码以基于选定值填充另一个下拉列表
    }
    

    您可以看到这一点

    我只想补充一点,即数据集的大小和所涉及的性能需求将决定您选择的路由。如果数据集太大而无法下载,则必须使用AJAX。如果您的客户端无法使用AJAX,或者您希望限制与服务器的连接,或者涉及密集查询,请使用JS对象/数组.
    <select id='my_select' onchange='javascript:myfunc()'>
    <option value='a'>a</option>
    .
    .
    <option value='z'>z</option>
    
    function myfunc(){
    //write code to populate another dropdown based on selected value
    
    }