【发布时间】：2018-02-14 08:12:12
【问题描述】：
我有3个选择框可用的场景每个选择框选项都根据其他选择框选项进行更改如果我们选择其他选择框选项，如何动态更改选项
我的 JSON 格式 ::
[
{
"projectname": "test1",
"scenarioList": [
{
"scenarioName": "test_scenario1",
"versionList": [
0.1,
0.2,
0.3,
0.4
]
},
{
"scenarioName": "test_scenario2",
"versionList": [
0.1,
0.2
]
}
]
},
{
"projectname": "test2",
"scenarioList": [
{
"scenarioName": "test2_scenario1",
"versionList": [
0.1,
0.3
]
}
]
}
]
示例 sn-p
var userModule = angular.module("UserModule",[]);
userModule.controller("dashboardController",["$scope",
dashboardControllerFun ]);
function dashboardControllerFun($scope){
debugger
var GraphData=[];
GraphData=
[
{
"projectname": "test1",
"scenarioList": [
{
"scenarioName": "test_scenario1",
"versionList": [
0.1,
0.2,
0.3,
0.4
]
},
{
"scenarioName": "test_scenario2",
"versionList": [
0.1,
0.2
]
}
]
},
{
"projectname": "test2",
"scenarioList": [
{
"scenarioName": "test2_scenario1",
"versionList": [
0.1,
0.3
]
}
]
}
]
$scope.load=function(){
$scope.graph=GraphData;
console.log("data :::"+$scope.graph);
$scope.compare_projectName=$scope.graph[0].projectname;
}
} <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js">
</script>
</head>
<div class="row" ng-app="UserModule" ng-controller="dashboardController" data-ng-init="load()">
<div class="col-md-12 col-xs-12">
<div class="panel-group">
<div class="panel panel-normal">
<div class="panel-heading">Graphical View of Scenarios</div>
<div class="panel-body" style="min-height:200px;">
<div class="col-md-3 col-xs-12">
<label class="control-label col-sm-3">Projects: </label>
<div class="col-sm-9">
<select class="form-control" data-ng-model="compare_projectName"
data-ng-options=" report.projectname as report.projectname for report in graph" >
</select>
</div>
</div>
<div class="col-md-4 col-xs-12">
<label class="control-label col-sm-3">Scenario Name: </label>
<div class="col-sm-9">
<select class="form-control" data-ng-model="compare_scenarioName"
>
</select>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label class="control-label col-sm-4">Iteration: </label>
<div class="col-sm-8">
<select class="form-control" ng-model="comapre_scenario_version"
>
</select>
</div>
</div>
<div class="col-md-1 col-xs-12">
<br>
<button class="btn-primary" type="submit">Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
console data:
</div>
</div>
【问题讨论】：
-
在您的第一个选择框上处理 onchange 事件，您应该在第一个 onchange 事件上设置您的第二个选择框模型，依此类推。或者您也可以尝试使用 $watch 来完成此操作
标签： javascript jquery angularjs jquery-selectbox