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

Question

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

如果我选择名为 car 的类别之一，则项目下拉列表应该有 Honda、Volvo、Nissan。

如果我选择名为 phone 的类别之一，则项目下拉列表应包含此 iPhone、Samsung、Nokia。

我该怎么做？ 我知道我不能用纯 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

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

这是基本流程：

1. 页面加载时初始下拉列表中填充了选项，例如类别（汽车、卡车、SUV），并且项目下拉列表被禁用。
2. 用户从第一个下拉列表中选择一个值，有几种方法可以处理这个问题：

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

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

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