녹아웃으로 선택 상자에서 값을 설정하고 수정하십시오.

Question

음, 두 가지 문제점이 있습니다. 처음에는 선택 상자에 기본값을 제공하는 방법을 모르겠습니다.

이벤트 선택을 통해 선택 상자의 값을 변경할 수 없습니다 ... 누군가가 나에게 손을 댈 수 있다면 매우 인상적 일 것입니다.

HTML

<select id="FilterBox" data-bind="value: siteGetOne"> 
    <option value="-2">City Wide</option> 
    <!-- ko foreach: sites --> 
    <option data-bind="text: name, value: $data"></option> 
    <!-- /ko --> 
</select> 

Selection Option Object : <span data-bind="text: siteGetOne"></span><br/> 
Selection Option name : <span data-bind="text: siteGetOne().name"></span><br/> 
Selection Option id : <span data-bind="text: siteGetOne().id"></span><br/> 

<a href="#" data-bind="click: setValue(1);">Set Value to 1</a> 
<a href="#" data-bind="click: setValue(2);">Set Value to 2</a> 
<a href="#" data-bind="click: setValue(3);">Set Value to 3</a> 

JS

var viewModel = function() { 
    var self = this; 
    setValue = ko.observable(); 

    self.sites = [ 
     { name: 'Site 1', id: 1}, 
     { name: 'Site 2', id: 2}, 
     { name: 'Site 3', id: 3} 
    ]; 

    self.siteGetOne = ko.observable(self.sites[2].id); 

    self.siteGetOne.subscribe(function (newValue) { 
     console.log(newValue); 
    }, self); 
} 

ko.applyBindings(new viewModel()); 

http://jsfiddle.net/xjYcu/276/

편집 최종 버전 : http://jsfiddle.net/xjYcu/286/

Answer 1

변경하려는 항목을 결합하십시오. 여기 전체 바이올린입니다. http://jsfiddle.net/xjYcu/283/

첫 번째 옵션은 선택한 옵션 바인딩을 사용해야합니다.

<select id="FilterBox" data-bind=" options: sites, 
      optionsText: 'name', 
      value: siteGetOne, 
      optionsCaption: 'Choose...'"> 

</select> 

클릭 바인딩을 이와 같이 변경하여 매개 변수를 전달할 수도 있습니다.

<a href="#" data-bind="click: function() {setValue(0)}">Set Value to 1</a> 
<a href="#" data-bind="click: function() {setValue(1)}">Set Value to 2</a> 
<a href="#" data-bind="click: function() {setValue(2)}">Set Value to 3</a>