根据其他下拉列表的select填充一个下拉列表

我想创build两个下拉列表，类别和项目。

如果我select一个名为汽车的类别，那么项目下拉列表应该有本田，沃尔沃，日产。

如果我select一个名为手机的类别，然后项目下拉列表应该有这个iPhone，三星，诺基亚。

我该怎么做？ 我知道我不能用纯HTML做。

Answer 1

工作演示http://jsfiddle.net/kasperfish/r7MN9/3/ （用jquery）

cars=new Array("Mercedes","Volvo","BMW","porche"); phones=new Array('Samsung','Nokia','Iphone'); populateSelect(); $(function() { $('#cat').change(function(){ populateSelect(); }); }); function populateSelect(){ cat=$('#cat').val(); $('#item').html(''); if(cat=='car'){ cars.forEach(function(t) { $('#item').append('<option>'+t+'</option>'); }); } if(cat=='phone'){ phones.forEach(function(t) { $('#item').append('<option>'+t+'</option>'); }); } } 

更新 ：使用eval（）能够添加尽可能多的数组，如你所愿。 JSFIDDLE DEMO

 cars=new Array("Mercedes","Volvo","BMW","porche"); phones=new Array('Samsung','Nokia','Iphone'); names=new Array('Kasper','Elke','Fred','Bobby','Frits'); colors=new Array('blue','green','yellow'); populateSelect(); $(function() { $('#cat').change(function(){ populateSelect(); }); }); function populateSelect(){ cat=$('#cat').val(); $('#item').html(''); eval(cat).forEach(function(t) { $('#item').append('<option>'+t+'</option>'); }); } 

Answer 2

有很多方法可以完成这取决于你的最终目标是什么。 这里是最常见的两个。

这是基本的过程：

1. 页面加载与选项填充初始下拉，让我们说类别（汽车，卡车，SUV）和项目下拉禁用。
2. 用户从第一个下拉列表中select一个值，有几种方法可以处理这个问题：

AJAX（页面加载最less的最完美体验）：

1. 使用Javascript发送ajax请求到一个PHP脚本（或任何其他处理程序），包含从类别下拉列表中select的选项的值作为一个职位或请求参数。
2. 根据我们的类别检索项目下拉列表的值，这些值可以来自我们的数据库，variables，静态文件或任何其他方法，您可以使用
3. 返回我们的值作为对AJAX请求的响应（json，xml，明文，任何适合您的最适合您的方式，最适合您使用）
4. 使用Javascript（或者你可以使用像jQuery这样的库），我们将返回的选项从我们的AJAX请求插入到项目下拉菜单中，并启用它，以便用户进行select。
5. 从这里，我们可以继续使用AJAX请求和响应，也可以通过POSTforms返回最终页面，或者无论您使用哪种特定用法。

如果你不想使用AJAX，你可以很容易地将表单发送到服务器端处理程序，从类别下拉列表中获取值，find你的项目下拉列表的值，然后在你的HTML响应您可以为类别下拉列表设置一个值并将其禁用（因此，如果用户想要更改类别，则必须使用后退button）并填充项目下拉列表。