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

Populate one dropdown list based on the selection of other dropdown list

本文关键字：下拉列表 一个 填充 选择 其他      更新时间：2023-09-26

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

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

如果我选择名为手机的类别之一，则项目下拉列表应该有这款iPhone，三星，诺基亚。

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

WORKING DEMO http://jsfiddle.net/kasperfish/r7MN9/3/(with 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 个最常见的。

这是基本过程：

  1. 页面加载时，初始下拉列表填充了选项，假设类别(汽车、卡车、SUV(和项目下拉列表已禁用。
  2. 用户从第一个下拉列表中选择一个值，有几种方法可以处理此问题：

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

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

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

相关文章：