【Angular】二级联动:如何从js二级联动,下拉框内容为动态查询
来源:互联网 发布:淘宝联合利华有假货吗 编辑:程序博客网 时间:2024/05/16 12:47
一、思路
①分别写两个各自独立的下拉框,互不影响;
②在父级下拉框里写一个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,"");
阅读全文
1 0
- 【Angular】二级联动:如何从js二级联动,下拉框内容为动态查询
- 下拉框二级联动
- 二级联动查询数据库到下拉框
- 下拉框select2二级联动 js+java
- js省市二级下拉联动
- js实现二级下拉联动
- 动态二级下拉框联动(二级数据从数据库中获取)
- ASP 二级联动下拉框
- Ajax二级联动下拉框
- ASP 二级联动下拉框
- asp 下拉框二级联动
- 实现下拉框二级联动
- asp 下拉框二级联动
- JavaScript二级下拉框联动
- 二级联动的下拉框
- 二级联动下拉单
- 用数据库内容制作二级联动下拉框并跳转
- 二级联动下拉菜单(js+DB)
- Axon Framework官方文档(十三)
- QQ第三方登陆
- 快速排序算法在字符排序中的应用
- Eclipse编译器配置Python环境(包括tensorflow、sklearn库等)
- FastJson-fastjson的简单使用
- 【Angular】二级联动:如何从js二级联动,下拉框内容为动态查询
- 哈哈日语 五十音详细分析
- CCF CSP 路径解析 JAVA 201604-3 100分
- 【知了堂学习笔记】java中的编译命令和JVM性能调优监控工具
- C语言结构体的字节对齐原则
- Cookie
- 使用Network实现简易聊天室
- 鞍点
- 编程中的树根思维