2010-04-09 52 views
4

我有一个包含两个下拉列表填充在PHP中的下拉列表中动态

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

如果这是可能的任何提示吗?(你可以认为我能够填充第一个下拉列表从DB)

感谢

回答

1

你将不得不使用AJAX来发送第一个下拉的选择然后您可以查询数据库并生成第二个下拉列表并将其发回给用户。

2

选项1:将文档中第二个选择的数据作为隐藏元素或JS对象嵌入。第一个选择的事件处理程序将填充第二个选择。 A List Apart有example dynamic select page

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

$('select#one').change(
    function (evt) { 
    $('select#two').load('/thing/'+this.value); 
    } 
); 

“/事/ <VAL>”标识您的服务器端脚本生成基于“<VAL>”(使用你的服务器的重写设施项目的列表,以解决实际脚本的URL路径)。您可以简单地让它始终生成<选项>元素,但更好的设计将包括一种指定结果格式的方式,因此它可以使用JSON或其他格式输出列表<li>。

$('select#one').change(
    function (evt) { 
    $('select#two').load('/thing/'+this.value, {fmt: 'option'}); 
    } 
); 
+1

我只补充一点,所涉及的数据集和性能需求的大小将决定你选择哪条路径。如果下载量太大,则需要使用AJAX。如果您的客户端无法使用AJAX,或者您希望限制与服务器的连接或涉及大量查询,请使用JS对象/数组。 – webbiedave 2010-04-09 22:28:45

0

您将需要异步回调到服务器,无需重新加载页面。 (我怀疑你真的想要一个按钮回到服务器)所以AJAX是可以做到这一点的。将AJAX调用添加到您的第一个下拉列表的onchange事件处理程序,该处理程序将选定内容发布回服务器并返回第二个下拉列表的内容。当AJAX调用返回新值时,您将使用它为第二个下拉列表构建内容。当然,除了实际的服务器部分之外,这些大部分都是在Javascript中完成的,这部分将保留在PHP中。

0

有两种方法可以做到这一点。老派“选择一个选项并提交以重建页面”方法,其工作非常普遍,以及新颖的AJAX方法,以加载第二个下拉列表的内容而不刷新页面。

两者都有优点/缺点,所以它归结为什么是最适合您的目的。 oldschool方法根本不需要任何javascript,但是由于它通过服务器完成表单的往返操作,因此您将看到“清除窗口并重新绘制页面”闪烁。

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

0

@outis在jquery中有好点使用.change否则使用onchange事件在select代码中。

<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 

} 

你可以看到这个Dynamically Populating Dropdown Based On Other Dropdown Value