jQuery 根据其他下拉列表的选择填充一个下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19039740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate one dropdown list based on the selection of other dropdown list
提问by sapan
I want to create two drop down lists, category and item.
我想创建两个下拉列表，类别和项目。
If I select one of the categories named car, then item drop down list should have Honda, Volvo, Nissan.
如果我选择名为 car 的类别之一，那么项目下拉列表应该有 Honda、Volvo、Nissan。
If I select one of the categories named phone, then item drop down list should have this iPhone, Samsung, Nokia.
如果我选择名为 phone 的类别之一，那么项目下拉列表应该有这个 iPhone、Samsung、Nokia。
How can I do this? I know that I can't do it with plain HTML.
我怎样才能做到这一点？我知道我不能用纯 HTML 来做到这一点。
回答by kasper Taeymans
WORKING DEMO http://jsfiddle.net/kasperfish/r7MN9/3/(with jquery)
工作演示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: using eval() to be able to add as much arrays as you want. JSFIDDLE DEMO
更新：使用 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>');
});
}
回答by Ken Hannel
There are numerous ways that you can accomplish this depending on what your end goal is. Here are the 2 most common ones.
根据您的最终目标，有多种方法可以实现这一目标。以下是最常见的 2 个。
This is the basic process:
这是基本过程：
- Page loads with the initial dropdown populated with options, let's say Category (Car, Truck, SUV) and the item drop-down disabled.
- User selects a value from the first drop-down, there are a few ways to handle this:
- 页面加载的初始下拉列表中填充了选项，假设类别（汽车、卡车、SUV）和项目下拉列表已禁用。
- 用户从第一个下拉列表中选择一个值，有几种方法可以处理：
AJAX (the most seamless experience with fewest page loads):
AJAX（页面加载最少的无缝体验）：
- Using Javascript send an ajax request to a PHP script (or any other handler) containing the value of the selected option from the category drop-down as either a post or request parameter.
- Retrieve the values for the item drop-down based on our category, these could be from our database, a variable, a static file, or any other means that you can come up with
- Return our values as a response to the AJAX request (json, xml, plaintext, whatever fits best for you and you're most comfortable using)
- Using Javascript (or you could use a library like jQuery) we insert the returned options from our AJAX request into the item drop-down and enable it so the user can make a selection.
- From here we can either continue using AJAX requests and responses or POST the form a return a final page, or whatever your particular usage calls for.
- 使用 Javascript 向 PHP 脚本（或任何其他处理程序）发送一个 ajax 请求，其中包含从类别下拉列表中选择的选项的值作为 post 或 request 参数。
- 根据我们的类别检索项目下拉列表的值，这些值可以来自我们的数据库、变量、静态文件或您可以想出的任何其他方式
- 返回我们的值作为对 AJAX 请求的响应（json、xml、纯文本，任何最适合您并且您最喜欢使用的东西）
- 使用 Javascript（或者您可以使用像 jQuery 这样的库），我们将来自 AJAX 请求的返回选项插入到项目下拉列表中并启用它，以便用户可以进行选择。
- 从这里我们可以继续使用 AJAX 请求和响应，也可以 POST 表单返回最终页面，或者您的特定用途要求的任何内容。
If you don't want to use AJAX, you could very easily POST the form to a Server-side handler, get the value from the category drop-down, locate your values for the item drop-down and then render your HTML response in which you set a value for the category drop-down and disable it (so the user would have to use the back button if they would wanted to change the category) and populate the item drop-down.
如果您不想使用 AJAX，您可以非常轻松地将表单发布到服务器端处理程序，从类别下拉列表中获取值，找到项目下拉列表的值，然后在您可以为类别下拉列表设置一个值并禁用它（因此，如果用户想要更改类别，则必须使用后退按钮）并填充项目下拉列表。
