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

 

---

 

文章不錯，支持一下