首页 > 代码库 > angularjs---select使用---默认值及联动
angularjs---select使用---默认值及联动
代码
一. select设置默认显示内容&&获取下拉框显示内容.HTML<div> <select ng-model="current_option" ng-options="option.key for option in option_array"> </select></div>JS$(function() { /**** 设置下拉框显示内容 ****/ $scope.option_array = [ {"key" : "hello", "value" : 1}, {"key" : "world", "value" : 2}, ]; $scope.current_option = $scope.option_array[0]; // 下拉框默认显示内容 console.log($scope.current_option.key); // 获取下拉框显示内容 console.log($scope.current_option.value); // 获取下拉框显示内容对应的值})二. select二级联动.HTML<div> <select ng-model="current_option" ng-options="option.key for option in option_array" ng-change="current_option_change()"> </select></div><div> <select ng-model="child_current_option" ng-options="option.key for option in child_option_array"> </select></div>JS$(function() // 这是动作, 立即执行{ /**** 设置父下拉框显示内容 ****/ $scope.option_array = [ {"key" : "hello", "value" : 2}, {"key" : "world", "value" : 2}, ]; $scope.current_option = $scope.option_array[0]; // 父下拉框默认显示内容 /**** 初始加载时根据父下拉框内容显示子下拉框内容 ****/ $scope.child_change_with_father();})/**** 根据父下拉框当前显示内容设置子下拉框内容 ****/$scope.child_change_with_father = function () // 这是方法, 调用执行{ if ("hello" == $scope.current_option.key) { $scope.child_option_array = [ {"key" : "hello_child_one", "value" : 1}, {"key" : "hello_child_two", "value" : 2}, ]; } else if ("world" == $scope.current_option.key) { $scope.child_option_array = [ {"key" : "world_child_one", "value" : 3}, {"key" : "world_child_two", "value" : 4}, ]; } $scope.child_current_option = $scope.child_option_array[0]; // 子下拉框默认显示内容}$scope.current_option_change = function() { $scope.child_change_with_father();}
angularjs---select使用---默认值及联动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。