JavaScript三级联动下拉菜单特效

三级联动的下拉菜单，算是前端开发里比较常见也挺实用的一种交互效果了。用户从第一级开始选，一层一层细化，拿到想要的结果，挺符合直觉的。你在做地址选择、分类筛选这类功能时会经常用到，交互清晰，用户体验也不错。

基础结构是三个标签，分别负责一级、二级和三级菜单。初始时只让第一级可选，等用户选完一级后再动态加载二级选项。这个用change事件监听就行，配合prop('disabled', false)启用下一级，顺手。

数据的话，你可以用AJAX实时拉，也可以直接在 JS 里预设好。比如：

var level2Options = {
  '一级菜单 1': ['二级菜单 1-1', '二级菜单 1-2'],
  '一级菜单 2': ['二级菜单 2-1', '二级菜单 2-2']
};

监听第一级变化，根据它的值去更新第二级菜单：

$('#level1').on('change', function() {
  var selected = $(this).val();
  $('#level2').html('').prop('disabled', false);
  if (level2Options[selected]) {
    for (var opt of level2Options[selected]) {
      $('#level2').append(`${opt}`);
    }
  }
});

第三级的逻辑也是类似，用两个上级值组合成 Key，去匹配三级选项。你可以封装个函数getLevel3Options()来这个，结构清楚，维护也方便。

样式部分也别忽略，虽然逻辑才是重点，但一个好看的菜单总归能让交互更顺滑。加点transition、hover 效果，体验会提升不少。

如果你对这个效果感兴趣，不妨看看压缩包texiao5609_1560681024，里面有完整代码和示例文件。直接打开index.html就能预览效果，修改起来也方便。

哦对了，如果你做移动端页面，也可以顺便参考一下jQuery 手机端三级联动下拉菜单特效，适配也挺到位的。

，掌握这种多级联动的交互方式，能帮你在不少项目里加分。要是你也在搞表单、分类或地域选择相关的功能，试试用这个特效准没错。

下载地址

用户评论

更多下载

下载地址

立即下载

用户评论