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

Question

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

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

如果我选择一个名为手机的类别，那么项目下拉列表中应该有这个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. 用户选择从第一个下拉的值，也有一些方法来处理这个问题：

AJAX（用最少的页面负载是最完美的体验）：

1. 使用JavaScript发向PHP脚本（或任何其他处理程序）发出的ajax请求，其中包含从类别下拉列表中选择的选项的值作为发布或请求参数。
2. 根据我们的类别检索项目下拉列表的值，这些值可能来自我们的数据库，变量，静态文件或您可以使用的任何其他方法
3. 返回我们的值作为响应到AJAX请求（json，xml，明文，任何适合你的最适合你的，你最喜欢使用的）
4. 使用Javascript（或者你可以使用类似jQuery的库），我们将返回的选项从我们的AJAX请求插入到项目下拉并启用它，以便用户可以进行选择。
5. 从这里我们可以继续使用AJAX请求和响应，也可以POST形式返回最终页面，或者无论您的特定用途需要什么。

如果您不想使用AJAX，您可以非常轻松地将表单发布到服务器端处理程序，从类别下拉列表中获取值，找到项目下拉列表的值以及然后呈现您为其设置类别下拉列表值的HTML响应并将其禁用（因此，如果用户想要更改类别，则必须使用后退按钮）并填充项目下拉列表。