代码
一. 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(); }
时间: 2024-10-11 18:04:37