淘汰赛级联下拉

我有两个下拉一个取决于其他（级联）。 'MainCategories'上的选择决定'SubCategories'的项目。另外，'MainCategories'上的选择也决定了表格行的可见性。以下是我的尝试：淘汰赛级联下拉

<table> 
    <tbody data-bind="foreach: contacts"> 
     <tr> 
      <td>MainCategories: 
       <select data-bind='options: MyCategories, value: mycategory, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select> 
      </td> 
      <td> 
       <!-- ko with: mycategory -->SubCategories: 
       <select data-bind='options: Categories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select> 
       <!-- /ko --> 
      </td> 
     </tr> 
     <tr data-bind="visible:mycategory()=='Type1'"> 
      <td>I am visible</td> 
     </tr> 
    </tbody> 
</table> 

<script type = "text/javascript" > 
    var MyCategories = [{ 
     "Categories": [{ 
      "Category": "Category1" 
     }, { 
      "Category": "Category2" 
     }], 
     "Type": "Type1" 
    }, { 
     "Categories": [{ 
      "Category": "Category3" 
     }, { 
      "Category": "Category4" 
     }], 
     "Type": "Type2" 
    }]; 
    var initialData = [{ 
     category: "Mobile", 
     product: "Nokia" 
    }]; 

    var ContactsModel = function (contacts) { 
     var self = this; 
     self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) { 
      return { 
       mycategory: ko.observable(contact.category), 
       product: ko.observable(contact.product) 
      }; 
     })); 

    }; 

    ko.applyBindings(new ContactsModel(initialData)); 
</script>

如果我删除optionsValue：“类型”，则“子类别”得到正确的项目。但是表格行的可见性并未按预期工作。如果我有optionsValue：“Type”，那么'SubCategories'没有被填充。而且，当我更改'MainCategories'的选项1或2次时，只有可视性工作正常。

请帮我看看我在这里做错了什么。谢谢，

来源

2013-08-01 user1918553

我读了你的问题，我有一种感觉，这会回答它，如果不解决这个问题，以至于你可以应用它 -

* 问题* -

你需要有使用Knockout级联下拉列表选择一个值并将您的可观察值设置为等于子选择的选定对象。

* 解决方案* -

使用计算，以使第二个下拉依赖于第一。示例 -

var selectedParent = ko.observable(); 

var parentCategories = ko.observableArray(MyCategories); 

var childCategories = ko.computed(function() { 
    if (!selectedParent()) { return new Array(); } 
    var childArray = []; 
    // get the values you want for the child here 
    return childArray; 
});

通过添加if（！selectedParent（））您正在使childCategories依赖于selectedParent。每当选择更改时，childCategories将自动更新。

然后你的视图可以是这样的 -

<td>MainCategories: 
       <select data-bind='options: parentCategories, value: selectedParent, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select> 
      </td> 
      <td> SubCategories: 
       <select data-bind='options: childCategories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select> 
       <!-- /ko --> 
      </td>

来源

2013-08-01 13:12:38

淘汰赛级联下拉

回答

相关问题