foreach：$ data并更改$ data

Question

我有一个arrayList，例如BallonColor = {red，Green} 所以我需要创建2倍的下拉框，如果我有5种颜色，那么我需要有5个下拉列表，所有5个项目作为所有下拉列表中的选项

如何在淘汰赛中实现

我尝试了以下代码..采取foreach：$ data（即每个项目） 但是当改变下拉列表的值时，绑定的$ index和$ data没有改变

<div data-bind = "foreach:$data" class="row">
                <div class="col">  
                    <select id ="SELECT" data-bind="options:$parent, optionsText: 'AttributeName', optionsValue: 'Id', optionsCaption: 'Select Attribute...',value : SelectedAttribute"></select>
                    <div data-bind="template: { name: function() { return templateName($parent,$data,SelectedAttribute) } }"></div>
                    <div>
                        <span>with any of the following values:</span>
                    </div>
                    <div class="option">
                        <a href="#"  id = "List"   class="link">List</a> | <a href="#"  id= "Range" class="link">Range</a>
                    </div>
                </div>
            </div>

Answer 1

这个问题与THIS question类似，我已经回答过了（可能）。
请看一下，告诉我结果。

感谢。