根据另一个下拉列表的选择填充一个下拉列表。

Question

根据另一个下拉列表的选择填充一个下拉列表。

javascriptjqueryhtml

6

我想创建两个下拉列表，一个是分类，一个是项。

如果我选择名为“汽车”的类别，则项下拉列表应该有本田、沃尔沃、日产。

如果我选择名为“手机”的类别，则项下拉列表应该有iPhone、三星、诺基亚。

我该怎么做呢？我知道不能只用简单的 HTML 来完成。

- sapan

2个回答

2

根据您的最终目标，可以使用多种方法来实现这一点。以下是最常见的两种方法。

基本过程如下：

页面加载时，初始下拉菜单填充选项，比如类别（汽车、卡车、SUV），而项目下拉菜单被禁用。
用户从第一个下拉菜单中选择一个值，有几种处理方式：

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

使用JavaScript向PHP脚本（或任何其他处理程序）发送一个ajax请求，其中包含从类别下拉菜单中选择的选项值，作为POST或请求参数。
根据我们的类别获取项目下拉列表的值，这些值可以来自我们的数据库、变量、静态文件或任何其他你能想到的手段。
将我们的值作为响应返回给AJAX请求（json、xml、纯文本等，以最适合您和您最舒适使用的方式为准）。
使用JavaScript（或您可以使用jQuery等库）将来自我们AJAX请求的返回选项插入到项目下拉菜单中，并启用它，以便用户可以进行选择。
从这里我们可以继续使用AJAX请求和响应，或者POST表单并返回最终页面，或者根据您的特定用法进行其他操作。

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

- Ken Hannel

我希望这足够清晰了，这是一个非常广泛的话题，如果说得太啰嗦就会变得不清楚。 - Ken Hannel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kasper Taeymans · Accepted Answer

工作演示 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>');
        });
    }