zoukankan      html  css  js  c++  java
  • 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();
    }

    文章不错,支持一下

  • 相关阅读:
    【Jenkins】插件更改国内源
    【Jenkins】参数化引用
    【selenium】各种exception
    利用浏览器的console篡改cookie
    【python】django 分页器 Paginator 基础操作
    centos7 安装php7遇到的问题
    归并排序(自顶向下、原地归并)
    希尔排序
    插入排序
    选择排序
  • 原文地址:https://www.cnblogs.com/helloweworld/p/4245232.html
Copyright © 2011-2022 走看看