设置Knockoutjs级联下拉菜单中的OptionValue

Question

有一个奇怪的问题，一切正常，直到我指定optionsValue。你可以看到我的问题在这里

工作 http://jsfiddle.net/abritez/ttyhE/2/

不起作用 http://jsfiddle.net/abritez/ttyhE/4/

所有你需要做的就是尽量与选择运行它认为是评论，而你尝试级联时会看到问题。

JSON数据

var productCategories = [{ 
"name": "Comapany A", 
"abbr": "cA", 
"disiplineList": [{ 
    "name": "Math", 
    "abbr": "math", 
    "courseList": [{ 
     "name": "Algebra", 
     "abbr": "alg" 
    }] 
}, { 
    "name": "English", 
    "abbr": "eng", 
    "courseList": [{ 
     "name": "Phonics", 
     "abbr": "phon" 
    }] 
}] 
}, { 
"name": "Company B", 
"abbr": "cB", 
"disiplineList": [{ 
    "name": "Gym", 
    "abbr": "gym", 
    "courseList": [{ 
     "name": "Kick Ball", 
     "abbr": "kb" 
    }] 
}] 
}]; 

HTML代码

<table width='100%'> 
<tbody data-bind='foreach: lines'> 
    <tr> 
     <td> 

      <select data-bind='options: productCategories, optionsText: "name", optionsCaption: "Select...", value: company'> </select> 

     </td> 
    </tr> 
    <tr> 
     <td data-bind="with: company"> 
      <select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select> 
     </td> 
    </tr> 
    <tr> 
     <td data-bind="with: disipline"> 
      <select data-bind='options: courseList, optionsText: "name", value: product'></select> 
     </td> 
    </tr> 

</tbody> 
</table> 

Java脚本（knockoutjs）

function ProductLine(){ 
        self.company = ko.observable(); 
        self.disipline = ko.observable(); 
        self.product = ko.observable(); 

        // Whenever the category changes, reset the product selection 
        self.company.subscribe(function() { 
         self.disipline(undefined); 
         self.product(undefined); 
        }); 
       } 

       function Product(){ 
        self.lines = ko.observableArray([new ProductLine()]); // Put one line in by default 
       } 

       ko.applyBindings(new Product());​ 

Answer 1

我仍然不明白这一点。

但是，如果你想显示的姓名和简称 U可以：

<select data-bind='options: productCategories, 
     optionsText: function(item) {return item.name + " - " + item.abbr}, optionsCaption: "Select...", value: company'> </select> 

如果u要显示

您简称您可以：

<td data-bind="with: company"> 
          <select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select> 
          <span data-bind="text: abbr"/> <-- like this 
         </td>