使用optgroup设置选择值knockoutjs

Question

有这个jsfiddle http://jsfiddle.net/gauldivic/wLrhrno9/这是接近我想要的。它有optgroups，但我似乎无法弄清楚如何设置值

JS

ko.bindingHandlers.option = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.selectExtensions.writeValue(element, value); 
    }   
}; 

function Group(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function Option(label, property) { 
    this.label = ko.observable(label); 
    this.someOtherProperty = ko.observable(property); 
} 

var ViewModel = function() { 
    this.groups = ko.observableArray([ 
     new Group("Group 1", [ 
      new Option("Option 1", "A"), 
      new Option("Option 2", "B"), 
      new Option("Option 3", "C") 
     ]), 
     new Group("Group 2", [ 
      new Option("Option 4", "D"), 
      new Option("Option 5", "E"), 
      new Option("Option 6", "F") 
     ]) 
    ]); 

    this.selectedOption = ko.observable(); 

    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected.someOtherProperty() : 'unknown'; 
    }, this); 
}; 

ko.applyBindings(new ViewModel()); 

HTML

<select data-bind="foreach: groups, value: selectedOption"> 
<option></option> 
<optgroup data-bind="attr: {label: label}, foreach: children"> 
    <option data-bind="text: label, option: $data"></option> 
</optgroup> 

---

我知道这是哪里设置选定的选项，但我似乎无法弄清楚如何让它工作。 this.selectedOption = ko.observable（）; 此外，这将与多个选择在同一页面上工作？ 我将使用这个数据库，我想能够预先选择的选项。

Answer 1

我可以让它工作：http://jsfiddle.net/brianlmerritt/3m67L5h0/

<select data-bind="foreach: groups, value: selectedOption"> 
    <!--<option data-bind="text:$index()+1"></option>--> 
    <optgroup data-bind="attr: {label: label}, foreach: children"> 
     <option data-bind="text: label, option: value()"></option> 
    </optgroup> 
</select> 


<hr /> 

<div data-bind="text: specialProperty"></div> 

我不知道什么的第一个选项是为 - 你可以把它放回，如果你想通过取消注释它。该选项的值有

注意要与括号，因为它是可观察的

小的变化，以视图模型

ko.bindingHandlers.option = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.selectExtensions.writeValue(element, value); 
    }   
}; 

function Group(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function Option(label, property) { 
    this.label = ko.observable(label); 
    this.value = ko.observable(property); 
} 

var ViewModel = function() { 
    this.groups = ko.observableArray([ 
     new Group("Group 1", [ 
      new Option("Option 1", "A"), 
      new Option("Option 2", "B"), 
      new Option("Option 3", "C") 
     ]), 
     new Group("Group 2", [ 
      new Option("Option 4", "D"), 
      new Option("Option 5", "E"), 
      new Option("Option 6", "F") 
     ]) 
    ]); 

    this.selectedOption = ko.observable(); 

    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected : 'unknown'; 
    }, this); 
}; 

ko.applyBindings(new ViewModel()); 

我改名为特殊其他变量的价值，所以你可以看到它被设置。

最后，您不需要在您的specialProperty中调用.someOtherProperty（）或.value（），因为observable将始终设置为该值。