淘汰賽：每個選項中的下拉列表

Question

我想在我的每個<option>中有兩列表<select>。我試過JSFIDDLE-source。但綁定在<span>不起作用

<span data-bind="text : countryName"></span> 
<span data-bind="text : selectedCountry"></span> 

任何想法？還是另一種解決方案

編輯

Answer 1

雖然你不能風格爲你的內容可以使用像Twitter的優秀Bootstrap框架類似的效果。

http://jsfiddle.net/marrok/QdjPt/

<div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
    <span class="name" data-bind="text: selectedItem().name"></span> 
    <span class="desc" data-bind="text: selectedItem().desc"></span> <span class="caret"></span> 
    </a> 

    <ul class="list dropdown-menu" data-bind="foreach: items "> 
     <!-- I should be able to use 'click' here but I'm not sure why it doesn't work. --> 
     <li class="item" data-bind="event: {mouseover : function(){$root.selectedIndex($index())}}">  
      <span class="name" data-bind="text: name"></span> 
      <span class="desc" data-bind="text: desc"></span> 
     </li> 
    </ul> 
</div> 

的Javascript：

var Thing = function(name, desc) { 
    var self = this; 
    self.name = ko.observable(name); 
    self.desc = ko.observable(desc); 
}; 

var AppModel = function() { 
    var self = this; 
    self.items = ko.observableArray([ 
     new Thing(1, "Thing One"), 
     new Thing(2, "Thing Two"), 
     new Thing(3, "Thing Three"), 
     new Thing(4, "Thing Four")]); 
    self.selectedIndex = ko.observable(0); 
    self.selectedItem = ko.computed(function() { 
     return self.items()[self.selectedIndex()]; 
    }) 
}; 

ko.applyBindings(new AppModel());​