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();
}