【Angular】二级联动:如何从js二级联动,下拉框内容为动态查询
2017-10-19 19:23
489 查看
一、思路
①分别写两个各自独立的下拉框,互不影响;②在父级下拉框里写一个ng-change方法,当父级下拉框的选中值变化时,调用方法;
③把父级选中的id或值传给子级下拉框,动态查询;
二、代码
1-1 html源码:<label class="col-lg-1 control-label" for="major">专业</label> <div class="col-lg-2"> <select class="input-sm form-control" name="id" id="major" ng-options="option.id as option.name for option in majorList" ng-model="q.majorId" ng-change="professionChange()"> </select> </div> <label class="col-lg-1 control-label" for="position">岗位</label> <div class="col-lg-2"> <select class="input-sm form-control" name="id" id="position" ng-options="option.id as option.name for option in positionList" ng-model="q.positionId"> </select> </div>
1-2 html截图;
2-1js代码:
/*专业初始化初始化:warn 必须初始化具体*/ $scope.majorList = [ { id:0 ,name:"1"} ]; /*岗位初始化:position*/ $scope.positionList = [ { id:0 ,name:"2"} ]; questionService.getMajorType().then( function (res) { /*清空*/ $scope.majorList = []; for (var i = 0; i < res.data.length; i++) { /*初始化*/ var majorSingleOption= { id:res.data[i].id, name: res.data[i].name }; $scope.majorList.push(majorSingleOption); } } ); /*当下拉选项变化的时候*/ $scope.professionChange=function () { var index=document.getElementById("major").selectedIndex;//获取当前选择项的索引. $scope.proChoosedId=document.getElementById("major").options[index].value;//获取当前选择项的值. var num = $scope.proChoosedId.replace(/[^0-9]/ig,""); questionService.getPositionType({professionId:num}).then( function (res) { $scope.positionList= []; for (var i = 0; i < res.data.length; i++) { /*初始化*/ var positionSingleOption = { id:res.data[i].id, name: res.data[i].positionName }; $scope.positionList.push(positionSingleOption); } } ); };
2-2js截图
三、总结
①获取选中的父级下拉框内的id,通过改id来查询其子选项;var index=document.getElementById("major").selectedIndex;//获取当前选择项的索引. $scope.proChoosedId=document.getElementById("major").options[index].value;//获取当前选择项的值.
②从字符串中提取数字(正则):
var num = $scope.proChoosedId.replace(/[^0-9]/ig,"");
相关文章推荐
- jsp中,使用js生成动态的数据库相关的二级联动下拉框
- AngularJS Or jQuery 省份城市二级联动下拉功能
- 如何动态增加下拉框列表,下拉框里的内容从js数组里得来?
- js下拉列表二级联动
- 原生js实现二级联动下拉列表菜单
- 【Angular】下拉列表写活的,动态查询的下拉列表;
- 二级联动下拉列表 asp+js【转】
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- js生成二级城市联动菜单,动态生成年、月、日字段,生产一个验证码
- js实现二级下拉联动
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 如何创建Html下拉框和js及jsp如何获取下拉框里的内容
- 二级联动菜单动态刷新下拉列表的一种实现方法
- [js]实现简单的省市二级联动下拉选择菜单
- AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 动态二级下拉框联动(二级数据从数据库中获取)
- js省市二级下拉联动
- jQuery-easyui中的combobox如何动态获取下拉框内容
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- js实现的下拉框二级联动效果