我想创建两个下拉列表，类别和项目。
如果我选择名为汽车的类别之一，那么项目下拉列表应该有本田、沃尔沃、尼桑。
如果我选择名为 phone 的类别之一，那么项目下拉列表应该有 iPhone、Samsung、Nokia。
我怎样才能做到这一点？我知道我不能用纯 HTML 来做到这一点。
根据其他下拉列表的选择填充一个下拉列表
IT技术
javascript
jquery
html
2021-01-20 11:46:23
2个回答
工作演示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>');
});
}
根据您的最终目标，有多种方法可以实现这一目标。以下是最常见的 2 个。
这是基本过程：
- 页面加载的初始下拉列表中填充了选项，假设类别（汽车、卡车、SUV）和项目下拉列表已禁用。
- 用户从第一个下拉列表中选择一个值，有几种方法可以处理：
AJAX（页面加载最少的无缝体验）：
- 使用 Javascript 向 PHP 脚本（或任何其他处理程序）发送一个 ajax 请求，其中包含从类别下拉列表中选择的选项的值作为 post 或 request 参数。
- 根据我们的类别检索项目下拉列表的值，这些值可以来自我们的数据库、变量、静态文件或您可以想出的任何其他方式
- 返回我们的值作为对 AJAX 请求的响应（json、xml、纯文本，任何最适合您并且您最习惯使用的）
- 使用 Javascript（或者您可以使用像 jQuery 这样的库），我们将来自 AJAX 请求的返回选项插入到项目下拉列表中并启用它，以便用户可以进行选择。
- 从这里我们可以继续使用 AJAX 请求和响应，或者 POST 表单返回最终页面，或者任何您的特定使用要求。
如果您不想使用 AJAX，您可以非常轻松地将表单发布到服务器端处理程序，从类别下拉列表中获取值，找到项目下拉列表的值，然后在您可以为类别下拉列表设置一个值并禁用它（因此如果用户想要更改类别，则必须使用后退按钮）并填充项目下拉列表。