Javascript 如何创建新的下拉列表'；s取决于上一个下拉列表中的选择

我正在尝试创建一个jQuery，它允许根据初始下拉列表的选择显示新的下拉列表。例如：

下拉列表1具有以下选项：汽车、飞机。若我选择了汽车，一个新的下拉列表将出现，其中包括：宝马、奥迪、特斯拉

如果选择“飞机”，则下一个下拉列表将显示：空客、波音

如果我在第二个下拉菜单中选择BMW（汽车->宝马），第三个下拉菜单将显示M3、M5等选项（这只是让您了解我的问题的示例）。基本上，我只希望根据上一个下拉列表的选择显示新的下拉列表

我自己尝试过这样的东西：

HTML:
<form id="test" name="testSearch">
<select class="test1">
  <option value="option">Car</option>
  <option value="country">Airplane</option>
</select>

jQuery:
$('form[name="testSearch"] select').click(function () {
        $('div[name=carForm]').append('<select id="carBrand">'+
        '<option>BMW</option>'+
         '<option>Audi</option>'+
         '<option>Tesla</option>'+

HTML：
汽车
飞机
jQuery：
$（'form[name=“testSearch”]select'）。单击（函数（）{
$（'div[name=carForm]'）。追加（'+
“宝马”+
“奥迪”+
“特斯拉”+

这不是很好，但也不是很好，我看到可以创建带有下拉列表的div，然后根据您在上一个下拉列表中所做的选择使其可见。我认为这是一种方法

---

很抱歉没有jsfiddle btw。非常感谢您的帮助。

我开始给您写一个模糊的答案，但后来扩展到了一个完整的工作示例。我将在下面解释所有内容，并在底部链接一些附加文档

var下拉列表=[
{
类型：“车辆”，
选项：[“汽车”、“飞机”]
},
{
父类型：“车辆”，
家长选项：“汽车”，
键入：“Make”，
选项：[“奥迪”、“宝马”]
},
{
父类型：“车辆”，
父选项：“飞机”，
类型：“类型”，
选项：[“737”、“747”]
},
{
父类型：“Make”，
家长选项：“奥迪”，
类型：“模型”，
选项：[“A4”、“A8L”]
},
{
父类型：“Make”，
家长选项：“宝马”，
类型：“模型”，
选项：[“M3”、“M5”]
},
{
父类型：“Make”，
类型：“颜色”，
选项：[“白色”、“黑色”、“红色”]
}
];
函数刷新下拉列表（父类型，选择，$container）{
var$newContainer=$（“”）；
如果（$集装箱）
$container.append（$newContainer）；
其他的
$（“正文”）.append（$newContainer）；
下拉列表
.filter（i=>i.parentType===parentType&&（i.parentOption===selection | |！i.parentOption））
.map（i=>{
var$newDropdown=$（“”）。数据（“类型”，i.type）；
var$options=i.options.map（option=>$（“”）.val（option.text（option））；
var$placeholderOption=$（“”）.text（`Select${i.type}…`）；
$newDropdown
.append（$placeholder选项）
.附加（$选项）；
返回$newDropdown；
})
.forEach（$i=>{
if（$container）$newContainer.append（$i）
否则{
var$rootContainer=$（“”）；
$rootContainer.appendTo（$newContainer）.append（$i）；
}
});
}
$（文档）。在（“更改”、“选择”函数（）上）{
var$container=$（this）.closest（“.container”）；
变量类型=$（this）.data（“类型”）；
var selection=$（this.val（）；
$container.find（“.container”）.remove（）；
刷新下拉列表（类型、选择、$container）；
});
刷新下拉列表（）；

选择{
显示：块；
宽度：150px；
填充：8px 4px；
保证金：5px0；
边界半径：5px；
}
.根容器{
填充：10px；
利润率：10px；
边框：1px实心#ccc；
}

---

您描述的内容通常被称为级联下拉列表。如果您搜索类似“jQuery级联下拉列表”的内容，您可能会更幸运地找到一个好的解决方案。@TylerRoper感谢您指出它们是如何被称为的。然而，我很难找到如何创建下拉列表，根据选择来显示每个下拉列表，允许在每个下拉列表之后扩展到越来越多的选择：汽车->宝马->M5->2017。或飞机->空中客车->A320->白色。所有这些新的下拉列表取决于之前的选择，在第一次隐藏后出现（divs）（为糟糕的示例感到抱歉）非常感谢您花时间帮助我，这正是我想要的。这些评论对我了解正在发生的事情非常有用。顺便问一句，可以给选择一个id吗？比如：id=“vehicle”并为选项添加值，如value=“BMW”？再次感谢！在创建下拉列表的行中（

var$newDropdown

），您可以添加

.attr（“id”，i.type）

分配id。除非我犯了错误，否则选项应该已经有值了！刚刚确认，选项实际上有值。但是，如果您需要不同于文本的id，可以将选项设置为对象数组而不是字符串数组。对象可以有两个属性，

value

和

text

，这些属性可以在显示

.val（option）.text（option）

的位置使用，改为类似

.val（option.value）.text（option.text）

。