当您浏览网络时，您是否遇到了下面的多层筛选框？
您是否曾经考虑过这里的逻辑判断是如何完成的？接下来，房东带领所有人使用本机JS语法来完成如此多级别的筛选框。如果您有一个过往的朋友，请记住赞美！交叉发行
第一步，让我们创建一个基本的HTML页面。
在第二步中，我们在HTML页面上添加三个表格，然后将它们放入体内。
第三步是在页面上添加一些样式以显示此Drop -Down框。
目前，出现一个凉爽的三级筛选框！
当然，这是一个没有灵魂的筛选框，无法与用户互动。当我们单击时，将没有任何出现。
接下来，我向他注入了灵魂，并允许它遵循我们的选择来显示不同的内容。
第四步是创建脚本标签并将其放入我们需要的数据中。当然，由于全国各地的城市太多，房东只选择了两个省份和他们的前两个城市以及前两个地区和县。朋友可以在地图上弥补数据！
第五步，让我们正式开始JavaScript的逻辑部分。首先，在页面上，应加载每个省的数据供用户选择。然后，我们需要穿越上述对象并取出OBJ对象的每个属性名称。
由于对象越少，因此建议使用object.key（）取出对象的所有属性值。此方法将返回到我们的数组，我们可以直接遍历此数组。当然，如果您必须直接穿越对象，那并非不可能。您可以使用（OBJ中的键）遍历对象。这里的房东使用第一个方法。我们每次都会生成一个drop -down框选项。
还有两种渲染数据的方法。第一个是DOM树驱动程序，它每次都会在DOM树中创建并添加标签。第二个是数据驱动程序。创建一个空数组。创建每个周期以在数组中创建标签沉积物。横渡器结束后，再次将次级方法添加到DOM树中。可以提高页面加载的速度和性能，因此请在此处选择第二个。我们穿过的新数组，因此MAP（）方法用于遍历数组，因此我们不需要创建一个空数组。该数组可以加载到DOM树中。
当然，我们无法直接加载数组，我们需要加入将数组变成字符串。PSuse+=在此处避免覆盖默认的drop -down框。如果=直接分配，该页面将在打开页面后立即自动加载第一个省，并且用户体验将很差。当然，当稍后加载城市和县时，您可以直接分配一个值。当用户选择该省时，该市将自动成为第一个提醒用户可以选择城市的数据。
总之：
在这一点上，一旦加载页面，我们就可以单击此Drop -Down框以选择。
步骤6，我们需要根据用户选择的各省加载相应的城市。在这里，您需要使用事件监视，聆听更改Drop -Down框的事件。当触发更改事件时，我们立即获得用户选择的省份，并立即穿越相应的城市加载。总之：
以同样的方式，装载区和县也在监视城市地区的变化，并立即获得数据渲染
因此，实际上，在这里写信，实际上可以出现一个简单的小链接效果
但是！但是！但是！！
当然，我们不能做这种事情来擦拭别人以擦屁股，对吗？这是因为我们泄露了一些逻辑判断而发生。当用户选择后来的城市，地区和县的筛选框时，然后，单击该省并将该省更改为默认的空状态，我们必须强迫后一个城市和地区重置默认状态。我们如何完成它？我们只需要在每个活动中触发，并立即清除城市背后的城市和县的数据。
以上问题可以解决单击该省的问题。
最后，还有最后一个错误，即我们一直忽略的按钮重置按钮。此表单按钮带有重置属性，但无法满足我们的需求。如图::所示，我们需要添加一个小事件。
城市和县重置后，有一个文本，因为我们使用=分配值在渲染过程中覆盖数据，并且涵盖了默认数据。因此，默认数据显示了coursethere的第一个数据将是错误，例如：
通常，在我们重置表格之后，当不单击该省时，城市和县都不应有选项，但是这里有显示选项，因为当我们首次单击时，数据已加载，并且表单是重置按钮只会将选项切换到默认选项（即带有所选属性的标签，如果您不带此属性，显示第一个属性），而不是删除drop -down -down选项列表，但是我们需要删除drop -down拉动在这里。清单，所以我们只能手动重置它：
效果如下，这个简单的小演示完成了！
完整的代码如下：
原始：https：//juejin.cn/post/7098519983335931917