我有以下问题:当我使用例如 4 个选择实现链式选择并更新第二个选择时,第三个选择为空,但第四个保留该值。这是 jsfiddle 的链接,其中包含我用来进行链式选择的策略(这个小提琴不是我做的!):
http://jsfiddle.net/pythondave/JUZDf/
- 选择老爷车
- 选择 1948 年保时捷 356-A 跑车
- 选择颜色
- 选择红色
- 选择 1949 年捷豹 XK 120
现在你看到第四个选择没有变空你怎么能让那个为空?
HTML部分:
<div ng-app ng-controller="SelectController">
<select ng-model="category" ng-options="c.name for c in sampleProductCategories"> </select>
<select ng-model="categoryItem" ng-options="p.name for p in category.products"></select>
<select ng-model="subChild" ng-options="o.value for o in categoryItem.options"></select>
<select ng-model="level4" ng-options="o.value for o in subChild.options"></select>
<hr />
category={{category.name}}<br/>
product={{categoryItem.name}}<br/>
subChild={{subChild.value}}<br/>
level4={{level4.value}}<br/>
</div>
Javascript:
function SelectController($scope) {
// Data taken from KnockoutJs cart example
$scope.sampleProductCategories = [
{
"name": "Classic Cars",
"products": [
{
"name": "1948 Porsche 356-A Roadster",
"options":[
{"value": "Color",
"options":[
{"value": "Red"},
{"value":"Black"}
],
},
{"value":"Seats",
"options":[
{"value": "Leather"},
{"value":"Cloth"}
],
},
{"value":"Warranty",
"options":[
{"value": "2 Year"},
{"value":"3 Year"}
],
}
],
"price": 53.9
},
{
"name": "1948 Porsche Type 356 Roadster",
"price": 62.16
},
{
"name": "1949 Jaguar XK 120",
"price": 47.25
}
]
},
{
"name": "Motorcycles",
"products": [
{
"name": "1936 Harley Davidson El Knucklehead",
"price": 24.23
},
{
"name": "1957 Vespa GS150",
"price": 32.95
},
{
"name": "1960 BSA Gold Star DBD34",
"price": 37.32
}
]
},
{
"name": "Planes",
"products": [
{
"name": "1900s Vintage Bi-Plane",
"price": 34.25
},
{
"name": "1900s Vintage Tri-Plane",
"price": 36.23
},
{
"name": "1928 British Royal Navy Airplane",
"price": 66.74
},
{
"name": "1980s Black Hawk Helicopter",
"price": 77.27
},
{
"name": "ATA: B757-300",
"price": 59.33
}
]
}
];
}