Knockout select 例子

Knockout select 中可以指定文本和值,名称不限。

1、视图模型

	var countries = [{country:'France',code:'01'},
                         {country: 'Germany',code:'02'},
                         {country: 'Spain', code:'03'];
	var selectedCountries = [<span><span class="string">'02'</span></span>];
		
        self.availableCountries = ko.observableArray(countries);
        self.chosenCountries = ko.observableArray(selectedCountries);
        
        #事件操作,传入参数为本viewModel
        self.whenchage = function(p){
        	alert('here:' +p);
        	alert(p.chosenCountries().length);
        	
        };
        	

2、视图

<p>
    Choose some countries you'd like to visit: 
    <select data-bind="options: availableCountries,  optionsText: 'country', optionsValue: 'code', selectedOptions: chosenCountries, 
          event:{change:whenchage}" size="5" multiple="true">
    </select>
</p>
 

这里,通过options指定select的options,为对象数组,包含文本和值,在本例中为country和code;

optionsText指向options中的文本字段,也就是对应SELECT中的显示文本;

optionsValue指向options中的值字段,也就是对应SELECT中的值。


select 中的事件一般绑定为change事件,即当下拉列表发生变化时,触发相应的操作,这里触发whenchange操作。


你可能感兴趣的:(select,knockout)