Javascript KnockoutJs：基于下拉选择创建复选框列表

我有一个GeneNames列表，将用于select控件的数据绑定选项

(GeneDropdownOptions:)
["CYP2D6","CYP2C19","CYP3A4","COMT","CACNA1C","MTHFR","ANK3","5HT2C","DRD2","SLC6A4"]

<!-- ko foreach: $root.AssaySelectedGenes -->
    <div class="form-group">
        <label data-bind='uniqueFor: true'>Gene:</label>
        <select class="form-control" data-bind='uniqueName: true, options: $root.GeneDropdownOptions, value: $data, optionsCaption: "Select Gene"'></select>                       
    </div>
<!-- /ko -->

有人可以通过向我介绍一个类似的示例或抛出一个JSFIDLE演示来帮助我实现这个功能吗。谢谢查看：-

<div class="form-group">
   <label data-bind='uniqueFor: true'>Gene:</label>
   <select class="form-control" data-bind='uniqueName: true, options: $root.GeneDropdownOptions, value: selectedGene, optionsCaption: "Select Gene"'></select>
</div>
<!-- ko foreach: snipData().Snips -->
   <input type="checkbox" data-bind="value: $data,checked:$parent.checkedSnips" />
   <span  data-bind="text:$data"></span>
   <br/>
<!-- /ko -->
<pre data-bind="text: ko.toJSON(checkedSnips)"></pre>

---

谢谢，这是可行的，但是如果selectedGene来自数据库中的值，我需要为每个下拉列表在下拉列表旁边显示一个单独的复选框列表，该怎么办呢。对不起，如果我在我原来的帖子里不清楚。这里有一个指向的链接。那么您想为每个selectedGene创建不同的复选框吗？您能帮助实现该功能吗？它有点复杂，所以让我先试试。

<div class="form-group">
   <label data-bind='uniqueFor: true'>Gene:</label>
   <select class="form-control" data-bind='uniqueName: true, options: $root.GeneDropdownOptions, value: selectedGene, optionsCaption: "Select Gene"'></select>
</div>
<!-- ko foreach: snipData().Snips -->
   <input type="checkbox" data-bind="value: $data,checked:$parent.checkedSnips" />
   <span  data-bind="text:$data"></span>
   <br/>
<!-- /ko -->
<pre data-bind="text: ko.toJSON(checkedSnips)"></pre>

var Vm = function () {
  var self = this;
  self.GeneDropdownOptions = ko.observableArray(genes);
  self.selectedGene = ko.observable();
  self.SnipCheckboxOptions = ko.observableArray(snipData);
  self.checkedSnips = ko.observableArray([]);
  self.snipData = ko.dependentObservable(function () {
    var gene = self.selectedGene(),
        arr = [];
    self.checkedSnips.removeAll();
    if (gene && gene !== "") {
        arr = ko.utils.arrayFirst(self.SnipCheckboxOptions(), function (i) {
            return i.GeneName === gene;
        });
    }
    return arr || [];
  });

}
 ko.applyBindings(new Vm());