Question

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

如果我选择其中一个名为car的类别，那么项目下拉列表应该包含Honda，Volvo，Nissan。

如果我选择其中一个名为phone的类别，则项目下拉列表应包含此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>');
        });
    }

}

UPDATED ：使用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

根据您的最终目标，您可以通过多种方式实现这一目标。以下是最常见的两种。

这是基本过程：

使用选项填充初始下拉列表的页面加载，假设类别（汽车，卡车，SUV）和项目下拉列表已禁用。
用户从第一个下拉列表中选择一个值，有几种方法可以处理：

AJAX（最少页面加载的无缝体验）：

使用Javascript将包含所选选项值的PHP脚本（或任何其他处理程序）的ajax请求发送到类别下拉列表作为post或request参数。
根据我们的类别检索项目下拉列表的值，这些值可以来自我们的数据库，变量，静态文件或您可以提出的任何其他方法
返回我们的值作为对AJAX请求的响应（json，xml，plaintext，最适合你的任何东西，你最舒服的使用）
使用Javascript（或者您可以使用类似jQuery的库），我们将AJAX请求中返回的选项插入到项目下拉列表中并启用它，以便用户可以进行选择。
从这里开始，我们可以继续使用AJAX请求和响应，也可以将表单POST返回最终页面，或者您的特定用途要求。

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

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

2 个答案: