开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js实现级联下拉列表

级联下拉列表是一种常见的用户界面元素，它允许用户根据前一个选择动态地填充后续的下拉列表选项。使用原生JavaScript实现级联下拉列表涉及以下几个基础概念：

基础概念

DOM操作：JavaScript通过Document Object Model (DOM) API与HTML文档进行交互，包括添加、删除和修改元素。
事件监听：为下拉列表添加事件监听器，以便在选择项改变时触发相应的函数。
异步请求：通常需要从服务器获取数据来填充下拉列表，这涉及到使用XMLHttpRequest或Fetch API进行异步数据请求。

实现步骤

HTML结构：创建两个或多个下拉列表，并为它们设置唯一的ID。
JavaScript逻辑：编写JavaScript代码来处理下拉列表的级联逻辑。
数据获取：从服务器获取数据以填充下拉列表。

示例代码

以下是一个简单的示例，展示了如何使用原生JavaScript实现两个级联的下拉列表：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>级联下拉列表</title>
</head>
<body>

<select id="category" onchange="loadSubCategories()">
  <option value="">请选择分类</option>
  <!-- 分类选项将通过JavaScript动态添加 -->
</select>

<select id="subcategory">
  <option value="">请选择子分类</option>
  <!-- 子分类选项将通过JavaScript动态添加 -->
</select>

<script>
// 假设这是从服务器获取的分类数据
const categories = [
  { id: 1, name: '电子产品', subcategories: [ { id: 101, name: '手机' }, { id: 102, name: '电脑' } ] },
  { id: 2, name: '服装', subcategories: [ { id: 201, name: '男装' }, { id: 202, name: '女装' } ] }
];

// 初始化分类下拉列表
const categorySelect = document.getElementById('category');
categories.forEach(category => {
  const option = document.createElement('option');
  option.value = category.id;
  option.textContent = category.name;
  categorySelect.appendChild(option);
});

function loadSubCategories() {
  const categoryId = categorySelect.value;
  const subcategorySelect = document.getElementById('subcategory');
  subcategorySelect.innerHTML = '<option value="">请选择子分类</option>'; // 清空子分类选项

  if (categoryId) {
    const category = categories.find(c => c.id == categoryId);
    category.subcategories.forEach(subcategory => {
      const option = document.createElement('option');
      option.value = subcategory.id;
      option.textContent = subcategory.name;
      subcategorySelect.appendChild(option);
    });
  }
}
</script>

</body>
</html>

优势

性能：原生JavaScript不需要加载额外的库或框架，因此可以减少页面加载时间。
灵活性：开发者可以根据具体需求定制级联逻辑和样式。
兼容性：原生JavaScript在所有现代浏览器中都有很好的支持。

应用场景

电子商务网站：根据用户选择的商品类别显示相应的子类别。
表单填写：在注册或申请表单中，根据用户的某些选择动态显示后续问题。

可能遇到的问题及解决方法

异步数据加载失败：确保服务器端API正常工作，并且客户端正确处理了网络请求的错误情况。
下拉列表更新不及时：检查事件监听器是否正确绑定，以及函数内部逻辑是否有误。
性能问题：如果级联层级很深或者数据量很大，考虑使用虚拟滚动技术优化用户体验。

通过以上步骤和示例代码，你可以实现一个基本的级联下拉列表。在实际应用中，可能需要根据具体需求进行调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生js实现二级联动下拉列表菜单

二级联动下拉列表菜单的难点在于对后台返回的数据进行解析，不多逼逼，直接上代码 ?...上图是后台返回的数据实现代码如下： var deviceNotExist = true;//防止数据重复 if(data.code == 0) { //查询成功 var param = data.content...mulArr[1][0][i].jssj + ">" + mulArr[1][0][i].kssj + "-" + mulArr[1][0][i].jssj + ""); } //选择下拉框列表内容时下面的列表实现联动...$("#device").change(function() { $("#period").html("");//改变列表值时先清空下面列表的内容 var dIndex = $("#device...option:selected").index();//获取当前选中列表的下标 for(var i = 0; i < mulArr[1][dIndex].length; i++) { $("

12.2K2 0

js下拉列表实现增加和移除选项

οnclick="add()"> //主要功能实现... //添加按钮功能实现 function add(){ //获取input文本输入狂标签 var txt = document.getElementById...txt.value; var se = document.getElementById("s1"); //把新建的option添加进来 se.add(o); } //移除按钮功能实现

2604 0

级联下拉单选框的实现

开发思路因为单选框使用的是公共组件，获取的val是“深圳市”，而不是索引，那么可以先判断出选择的城市的索引值；由此所在区县的下拉框的数据直接由所获的索引值去取。...= this.cityMy.map(item => { return { label: item, value: item }; }); //拿到的是城市的列表...if (cityIndex > -1) { this.getCounty(cityIndex); } }, //获取所选城市的对应医药机构所在区县下拉框...}); this.defaultAjax += 1; } }); } }); }, 级联下拉单选框...其实像级联下拉单选框还有一些框架就有现成的，可以参考一下这些框架。

2361 0

【自然框架】分享 n级联动下拉列表框

特点： 1、使用js方法，把需要的数据一次性写入到页面里，然后用js来实现联动的效果。 2、支持n级。 3、封装成了服务器控件，所以使用非常简单。 4、支持在回发的时候保持状态。...itemID; } protected void btn_SetItemSelect_Click(object sender, EventArgs e) { //设置下拉列表框的选项...n级联动，那么就需要n条SQL语句。 3、修改记录演示一般在修改记录的时候，需要根据记录里的信息设置列表框的选项，这里演示了这种功能。...然后设置，这里只是一个实例 this.lst_Area.SetSelectedValue("6,568,572"); } 4、页面修饰演示您看了上面的演示，可呢会觉得几个下拉列表框挨在一起太难看了...这个可以在下拉列表框的前面，加上一些修饰。

2.8K7 0

级联下拉菜单的实现「建议收藏」

最近在项目中用到了级联菜单，在网上查过资料后，大概有两种实现思路： 1.下拉列表中的数据从数据库中自动获取 2.下拉列表中的每一个选项都写在代码中相信我们都会选择第一种方法，这样不仅增强了代码的复用性...我们今天就先来介绍一下用第二种方法来实现级联下拉菜单的效果代码实例:级联菜单 <meta content="text/html; charset=utf-8"

1.2K2 0

Excel应用实践13：制作产品选型表，在用户窗体中实现级联下拉列表

在第一个选项列表中选择第一个数据，第二个选项列表中选择第二个数据，依此类推。并且，后面的选项列表内容会根据前面选择的内容而发生变化。如下图1所示。 ?...图1 上图1是使用Excel VBA用户窗体实现的效果，实现起来很简单。首先，准备数据，如下图2所示。第1列单元格中的值分别是该列下方数据单元格区域的名称，这需要我们事先使用名称功能进行定义。...Application.WorksheetFunction.Transpose(Range("型号23")) Case Else cmbSubModel.Value = "" End Select End Sub 至此，运行用户窗体，即实现上图

3.1K2 1

Apriso 实现下拉框多级联动

本文介绍在Apriso中通过配置方法实现DropDownList级联选择，引用现有的Javascript文件后，只需要对Form控件的Properties进行设置，就可以方便的实现级联。...安装JavaScript js>> 文件内容如下： $(document).ready(function () { var startWith...Form [data-apriso-ext-select-where] select").aprisoDropDownListLinkage(); }); 将DropDownListLinkage.js...文件： js"> 运行测试实际运行效果：WorkCenter1...的可选项根据Facilit1的选择项进行动态变化，实现级联选择效果。

3.5K2 0

Android：控件Spinner实现下拉列表

android:prompt="@string/sex_roommates_tip" android:scrollbarSize="30sp"/> 最后就是下拉选项的引用了

1.6K3 0

AngularJS 使用ngOption实现下拉列表

最近使用到了ngOption实现下拉选择列表，由于需要实现分组等功能，百度了下没有太好的文章，就百度到一篇英文的帖子，按照其中的代码很顺利的搞定了。...本篇根据文中代码，详细讲述下如何实现下拉列表更多内容参考：AngularJS知识总结下拉列表的简单使用 ng-option指令使用很简单，只需要绑定两个属性：一个是ng-model用于获取选定的值...；另一个是ng-options用于确定下拉列表的元素数组。...id: 4, type: "Play" , name: "Dancing" } ]; }]); 实现下拉列表的分组...当你选择一个下拉列表选项的时候，就会覆盖掉这个初始值。所以更多的时候会使用一个id进行标识，这样在初始化赋值的时候，只需要设定一个id就可以了。

2.2K10 0

winform实现下拉控件的无限级联动(DevExpress版)

1程序用到了第三方的DevExpress控件 2属性 private List<TradeTypeEntity> trades = null;//存储数据 ...

6442 0

js代码实现下拉菜单

效果 js代码： function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName

8.3K3 0

实现导航栏下拉菜单列表页面

4" data-txt="{{item.name}}" bindtap="filter">{{item.name}} 2.app.wxss中添加如下样式： /* tab下拉样式...display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } 3.wxss页面代码： /* tab下拉样式...border: solid 1px #eee;margin:20rpx 0 0 26rpx;} .tabLayer .active{color:#e64340;border-color:#e64340;} 4.js

4.4K2 0

vue实现下拉框二级联动效果

vue实现下拉框二级联动效果 1、实现效果 2、后端返回的数据格式 3、vue页面中 1、实现效果 2、后端返回的数据格式 "list": [ { "id": "1178214681118568449..."title": "Java" } ] } ] 数据格式不一定和上面的一样，我上一篇文章是把这个数据格式用在了树形控件上面，这里放在二级联动上面...response=>{ this.subjectOneList=response.data.list }) } } } 主要思想就是在第一级下拉框发生单击事件的时候...，我们拿到第一级下拉框的id值(这里你不一定是id值)，然后遍历包含所有数据的一级分类集合，找到和当前单击事件选中的一级分类id值相等的那个对象，然后把它的children属性(我的children在后端是个二级分类的集合...当然，你也可以修改下单击事件的执行逻辑，还有一种方法是每单机一次，用单击选中的以及下拉框的键去后端查所有的二级分类，再将查到的二级分类赋值给第二个下拉框即可，但这样效率感觉有点慢，虽然这也是一种实现方式

3.8K5 2

下拉菜单11+原生js获取select下拉框的selected的option项

name=""> text1 text2 code: 一：javascript原生的方法...数组转json并在后台对其解析具体实现想必大家在开发过程中也遇到类似问题，如果直接将js获取的数组传给后台，后台是无法区分数组的，因为js数组如果是二维的就是这样的：1,张三,23,2,李四,26...希望能给大家带去帮助首先需要在js里面对数组进行转换为json格式 js代码如下：代码如下: /** *js数组转json * */ function arrayToJson...js获取select下拉框的selected的option项一....使用原生js，获取select标签下属性有selected的option项。

7964 0

原生JS实现哈希路由

页面代码在我们用前端框架的时候，经常用到路由技术，就是在地址栏确实发生了变化但是页面没有刷新，那么本文就介绍通过更改哈希的方式实现这样一种路由，下面是页面代码： Hash Router</h1

2.4K2 0

原生JS实现翻书特效

给大家分享一个用原生JS实现的翻书效果图，效果如下：实现代码如下，欢迎大家复制粘贴。原生JS实现翻书特效

20.4K0 1

原生 JS 实现复制功能

document.getElementById('target'); copyToClipboard(target.value); } copyToClipboard 方法用来实现复制功能...，实现过程：创建一个 span 选中span节点内容使用 document.execCommand('copy')将选中内容加入剪贴板

7.7K2 0

原生js实现on和emit

转载自：http://www.cnblogs.com/aisiqi-love/p/10594461.html

2.9K3 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生...JS实现分页效果 a { margin: 5px; }

12.4K1 0

原生JS 实现元素排序

原生...JS 实现元素排序 * { margin: 0; padding:...var outer_wrap = $('outer_wrap'); outer_wrap.onmousedown = function (event) { //获取列表顺序

3.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭