6

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

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

如果我选择名为 phone 的类别之一，则项目下拉列表应该有这个 iPhone、Samsung、Nokia。

我怎样才能做到这一点？我知道我不能用纯 HTML 做到这一点。

4

2 回答 2

9

工作演示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 演示

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>');
        });
    }
于 2013-09-26T23:17:27.373 回答
2

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

这是基本过程：

  1. 页面加载初始下拉菜单，其中包含选项，例如类别（汽车、卡车、SUV）和项目下拉菜单已禁用。
  2. 用户从第一个下拉列表中选择一个值，有几种处理方法：

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

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

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

于 2013-09-26T23:01:28.640 回答