动态联动select下拉框实现

我们在做下拉框选择时，常常会遇到一种场景，就是需要两个下拉框，其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化。

比如我有大的分类:

有氧运动无氧运动

选择有氧运动时，选项有：跑步，游泳

选择无氧运动时，选项有：深蹲，卧推

本章记录如何实现动态联动select下拉框实现。

我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录动态联动select的实现。
应用bootstrap模板

基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架

我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面上做修改，实现动态联动select的实现。

如果要加上智能补全和模糊查询可把select下拉框初始化为select2。

详情参考:

智能补全模糊查询select2的下拉选择框使用

index.jsp代码如下:

<%@ include file="./include/header.jsp"%><link rel="stylesheet" href="/plugins/select2/dist/css/select2-site.css"type="text/css"></link><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">Select <small>下拉框动态联动</small></h1></div></div><!-- /. ROW  --><form class="form-horizontal" id="navigation"><div class="form-group"><label for="sourceModule" class="col-sm-2 control-label">分类选择:</label><div class="col-sm-10"><select class="form-control" id="projectType" name="projectType"><option value=""> - 分类 -</option><option value="aerobic">有氧运动 </option><option value="anaerobic">无氧运动 </option></select></div></div><div class="form-group"><label for="sourceId" class="col-sm-2 control-label">项目选择:</label><div class="col-sm-10"><select class="form-control" id="projectId" name="projectId"><option value="">- 关联项目 -</option></select></div></div></form>  <!-- /. ROW  --></div><!-- /. PAGE INNER  --></div><!-- /. PAGE WRAPPER  --><%@ include file="./include/footer.jsp"%>
<script src="/plugins/select2/dist/js/select2.min.js"></script><script type="text/javascript">$(document).ready(function () {//绑定分类下拉框选项变化事件$("#projectType").on('change',function () {var projectType = $(this).val();$('#projectId').val('').trigger('change');if (projectType == '') {$("#projectId").empty().append('<option value="" >- 关联项目 -</option>');return;}var projectsMap = {};if (projectType == 'aerobic') {var projectsMap = {'1':'跑步','2':'游泳',};} else if (projectType == 'anaerobic') {var projectsMap = {'3':'深蹲','4':'卧推',};}var option = "";for (var i in projectsMap) {option += '<option value="' + i + '"  >' + projectsMap[i] + '</option>';}$("#projectId").empty().append('<option value="" >- 关联项目 -</option>' + option);});});</script></body></html>

实现效果如下:

如果联动的内容是后台java传递过来的，只需要修改projectsMap的赋值即可。

如下:

     var projectsMap = {};if (projectType == 'aerobic') {var projectsMap = {<c:forEach items="${aerobics}" var="item">'${ item.id }': '${ item.name }', </c:forEach>};} else if (projectType == 'anaerobic') {var projectsMap = {<c:forEach items="${anaerobics}" var="item">'${ item.id }': '${ item.name }', </c:forEach>};}

如果是编辑页面需要选中后台传递的实体对应的项目则在循环projectsMap时做判断：

 var pid='${projectId}';var option = "";for (var i in projectsMap) {if (i == pid) {option += '<option value="' + i + '"    selected >' + projectsMap[i] + '</option>';} else {option += '<option value="' + i + '"  >' + projectsMap[i] + '</option>';}}

动态联动select下拉框实现相关推荐

动态渲染select下拉框选中状态
动态渲染select下拉框选中状态 <div><select name="selectBox" id="" class="selec ...
bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...
jQuery动态生成select下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
bootstrap动态调用select下拉框
html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</lab ...
Select下拉框实现中国省市区三级联动
JS Select下拉框实现中国省市区三级联动联动效果以内蒙古自治区为例 distpicker.js资源获取 https://pan.baidu.com/s/1S17KyRmPfz6WYaYUV1 ...
Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
layui 实现动态 radio 、select下拉框 jQuery赋值方法
layui radio .select 赋值方法下面展示一些 radio 单选框赋值. <div class="layui-inline layui-col-md4"> ...
antd vue 多个下拉联动_antd中select下拉框值为对象选中的问题
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在o ...
select下拉框动态获取数据
需求:select下拉框中的数据是从后台接口中获取的,而不是自己写的假数据步骤:(这里是用jquery及ajax发送请求) 一.页面上导入jquery在线资源二.代码实列如下(仅供参考) < ...

动态联动select下拉框实现

动态联动select下拉框实现相关推荐

最新文章

热门文章