Question

我有2个下拉选择框，第一个选择将更改第二个选择的选项。我正在使用淘汰赛来控制它，它工作正常。

我的第二个要求是允许用户动态添加选择框对（将第一个和第二个选择框添加在一起，首先选择框控制第二个选择框）。

这是我的代码http://jsfiddle.net/mang/pyh9m7de/2/，这是第一次正常工作。当用户点击添加新的选择框时，我不知道如何使用knockout来解决我的问题。

     <section class="col-sm-4 col-lg-5 selectContainer">
       <select class="form-control" data-bind="options: optionsSelection, value: selectedOption"></select>
     </section>
     <section class="col-sm-5">
       <select class="form-control" data-bind="options: colors"></select>
     </section>
     <section>
         <span class="input-group-btn">
         <button id="add" class="btn btn-success btn-add" type="button">
                                    add
         </button>
         </span>
    </section>

Answer 1

你应该尝试这样的事情

查看：

<div class="container" data-bind="foreach:array">
                <div class="control-group">
                    <div class="controls">
                        <div class="entry input-group" style="margin-left:10em">
                        <section class="col-sm-4 col-lg-5 selectContainer">
                            <select class="form-control" data-bind="options: optionsSelection, value: selectedOption"></select>
                        </section>
                        <section class="col-sm-5">
                             <select class="form-control" data-bind="options: colors"></select>
                            </section>
                            <section>
                                <span class="input-group-btn">

去掉加

<强>视图模型：

function test(){
    var self=this;
self.selectedOption = ko.observable(0);
   self.allCategories = ko.observableArray([
    {type: 1, name: 'Red'},
    {type: 1, name: 'Blue'},
    {type: 1, name: 'Green'},
    {type: 2, name: 'xxx'},
    {type: 2, name: 'yyy'},
    {type: 2, name: 'zzz'}]); 

    self.optionsSelection = ko.observableArray([1,2]);

    self.colors = ko.computed(function () {
        var finalColors = [];
        var tempColors = ko.utils.arrayFilter(self.allCategories(), function (innerdata) {
            return innerdata.type == self.selectedOption();
        });
        ko.utils.arrayForEach(tempColors, function (item) {
            finalColors.push(item.name);
        });
        return finalColors;
    });
}


function MyViewModel() {
    var self = this;
    self.array=ko.observableArray([new test()]);
    self.add = function()
    { 
     self.array.push(new test());
    }
   self.remove=function(){
     self.array.remove(this);    
    }
}


$(document).ready(function () {
ko.applyBindings(new MyViewModel());
})

示例工作小提琴here

淘汰动态控件创建

1 个答案: