两个相关的下拉菜单 [英] two related dropdown menus
问题描述
你好，
我试图在我的一个表单中创建两个下拉菜单，以便它们按以下方式运行：
第一个菜单包含类别和类别。项目，我硬编码到表格中。我希望将第二个菜单与第一个菜单相关联，这样，只要您从第一个菜单中选择一个选项，第二个菜单就会仅列出 那些属于第一个菜单的项目的名称。类别"在第一个菜单中选择。
我有一个设置数据的表。表格的名称是项目，两个字段是 itemName 和 itemCategory 。
请帮我解决这个问题。我尝试了很多东西但是我无法做的第一件事就是让第一个菜单立即响应，而不需要按下自动按钮。
唯一我到目前为止的一些代码：
[html]
< tr>
< td width =" 50" >< select name =" category" >
< option value =" 1">开胃菜< /选项>
< option value =" 2">肉和鱼< / option>
< option value =" 3">汤< / option>
< option value =" 4"> salad< / option>
< option value =" 5"> vegetarian< / option>
< option value =" 6"> dessert< / option>
< option value =" 7">冷饮< / option>
< option value =" 8">热饮< / option>
< / select>< / td>
< / tr>
<！ - 第3行 - >
< tr>
< td width =" 80" align =" right">商品名称< / td>
< td width =" 50">< select name =" items">
< option value = " 1"> wings< / option>
< / select>< / td>
< / tr>
[/ html]
Hello there,
I am trying to create two dropdown menus in one of my forms so that they behave in the following way:
the first menu consists of "categories" of items, which I hard coded into the form. i am looking to relate the second menu with the first one such that, as soon as you choose an option from the first menu, the second menu lists only the name of those items that falls in the "category" chosen in the first menu.
I have a table set up with the data. The name of the table is items and the two fields are itemName and itemCategory.
Please help me out in sorting this problem. I have tried many things but the first thing that I am already unable to do is to make the first menu respond immediately without a need to press a button "automatic".
the only bit of code that i have so far:
[html]
<tr>
<td width = "50" ><select name="category" >
<option value="1">appetizer </option>
<option value="2">meat and fish</option>
<option value="3">soup </option>
<option value="4">salad </option>
<option value="5">vegetarian </option>
<option value="6">dessert </option>
<option value="7">cold drinks </option>
<option value="8">hot drinks </option>
</select></td>
</tr>
<!--row 3-->
<tr>
<td width = "80" align = "right"> Item Name </td>
<td width = "50"><select name="items">
<option value="1">wings </option>
</select></td>
</tr>
[/html]
推荐答案
您可以使用Ajax（HTML，JavaScript和服务器端编程，如PHP，ASP）来实现这一目标。
一旦选择了第一项，就会触发一个JS例程进入服务器db并调用一个从db获取数据的程序，通过Ajax回显结果，JS选择并显示选择列表。
查看 Client Lookup示例。还有链式选择框。该网站的演示展示了各种可能性。
Ronald：很酷：
You can accomplish that using Ajax (HTML, JavaScript and server side prog like PHP, ASP).
As soon as the 1st item is selected, a JS routine is triggered that goes to the server db and invokes a program which gets the data from the db, echoes the results back via Ajax, JS picks it up and displays the select list.
Look at the Client Lookup sample in the Ajax samples site. Also the "Chained Select boxes" demo at that website shows the possibilities.
Ronald :cool:
你可以完成使用Ajax（HTML，JavaScript和服务器端编程，如PHP，ASP）。
一旦选择了第一项，就会触发一个JS例程进入服务器db并且调用一个程序从数据库中获取数据，通过Ajax回传结果，JS选择并显示选择列表。
查看 Client Lookup示例。还有链式选择框。该网站的演示展示了各种可能性。
罗纳德：酷：
You can accomplish that using Ajax (HTML, JavaScript and server side prog like PHP, ASP).
As soon as the 1st item is selected, a JS routine is triggered that goes to the server db and invokes a program which gets the data from the db, echoes the results back via Ajax, JS picks it up and displays the select list.
Look at the Client Lookup sample in the Ajax samples site. Also the "Chained Select boxes" demo at that website shows the possibilities.
Ronald :cool:
非常感谢罗纳德，将会看看它。但有没有办法只使用HTML和PHP和SQL来实现这一目标？或者我确实需要使用java脚本或类似的东西？
Thanks a lot ronald, will look into it too. But is there a way to just use html and php and sql to accomplish this? or do i definitely need to use java script or sth like that?
是的，你可以不用，但编程会很麻烦。
首先，没有任何JavaScript，您无法动态检测字段是否已填充或单击。您将必须显示第一个选择框然后执行某种提交以将其发送到服务器程序。
然后你可以在第二遍中读取POSTed值，从数据库中获取数据并填写表格的第二个下拉列表（在同一个脚本中）并重新输入显示它。然后另一个提交将下拉列表发送到服务器和进程。
所以你必须编写HTML / PHP脚本以便它可以处理2遍：
pass1：填写第一个选择框，点击提交并建立第二个选择框
pass2：填写第二个选择框，点击提交和处理请求。
使用JS要容易得多，因为（a）你可以立即采取行动，例如使用onchange，单击选定的下拉字段，然后（b）您可以异步到服务器，获取第二个下拉框值并填写表单。而且都没有提交表格。
这个解释对你有意义吗？
罗纳德：酷：
Yes you could do it without, but it will be a lot of hassle to program.
First, without any JavaScript you cannot detect dynamically that a field is filled or clicked. You''ll have to display the 1st select box en then do some sort of submit to send it to the server program.
Then you can, in the 2nd pass, read the POSTed value, get your data from the database and fill the form''s 2nd dropdown (in the same script) and re-display it. Then another submit to post both dropdowns to the server and process.
So you have to program your HTML/PHP script so it can handle 2 passes:
pass1: fill 1st select box, click submit and build 2nd select box
pass2: fill 2nd select box, click submit and process request.
Using JS is a lot easier, because (a) you can immediately act on, e.g. using onchange, click of a selected dropdown field and (b) you can go asynchronously to the server, get the 2nd dropdown box values and fill the form. And all without submitting the form.
Does this explanation make any sense to you?
Ronald :cool:
这篇关于两个相关的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
