녹아웃으로 텍스트 상자 값을 수정하는 드롭 다운

Question

다음 html/JavaScript는 텍스트 상자의 두 값을 드롭 다운 메뉴에서 수정하려고 시도합니다. 나는 텍스트 상자 하나의 각각의 값을 수정 드롭 다운의 값을 변경할 때마다 내가 원하는

<select type="date" data-bind="options: dateranges, 
optionsText: 'rangeName', optionsCaption: 'Choose' "> 
<select> 
<br> 
<input type="date" data-bind="value: rangeStartVal , valueUpdate: 'afterkeydown'" /> 
<br /> 
<input type="date" data-bind="value: rangeStopVal , valueUpdate: 'afterkeydown'" /> 

<script type="text/javascript"> 
    var RangeValue = function (name, startVal, stopVal) { 
     this.rangeName = name; 
     this.rangeStartVal = startVal; 
     this.rangeStopVal = stopVal; 
     return 
    }; 

    var viewModel = { 

     dateranges: ko.observableArray([ 
     new RangeValue("Today", "2014-04-28", "2014-04-28"), 
     new RangeValue("Yesterday", "2014-04-27", "2014-04-27"), 
     new RangeValue("This Week", "2014-04-28", "2014-05-04"), 
     new RangeValue("Last Week", "2014-04-21", "2014-04-27"),]), 
    }; 

    ko.applyBindings(viewModel); 
</script> 

는 시작 값이고, 다른 하나는 정지 값입니다.

Answer 1

선택한 범위를 보유 할 속성을 정의해야합니다. 그리고 입력 내용을 selectedRange의 rangeStartVal 및 rangeStopVal 속성에 바인딩하십시오.

FIDDLE

또한 당신은 기본적으로 아무것도 결합하고 selectedRange 설정을하지 않는 요소를 숨길 것이라고 IF 바인딩을 알 수 있습니다.

<select type="date" data-bind="options: dateranges, 
optionsText: 'rangeName', optionsCaption: 'Choose', value: selectedRange "> 
<select> 
<br> 
<div data-bind="if: selectedRange() != undefined"> 
<input type="date" data-bind="value: selectedRange().rangeStartVal , valueUpdate: 'afterkeydown'" /> 
<br /> 
<input type="date" data-bind="value: selectedRange().rangeStopVal , valueUpdate: 'afterkeydown'" /> 
</div> 

보기 모델 :

var RangeValue = function (name, startVal, stopVal) { 
    var self = this; 
    self.rangeName = name; 
    self.rangeStartVal = startVal; 
    self.rangeStopVal = stopVal; 
}; 

function myVm() { 
    var self = this; 
    self.dateranges = ko.observableArray([ 
     new RangeValue("Today", "2014-04-28", "2014-04-28"), 
     new RangeValue("Yesterday", "2014-04-27", "2014-04-27"), 
     new RangeValue("This Week", "2014-04-28", "2014-05-04"), 
     new RangeValue("Last Week", "2014-04-21", "2014-04-27")]); 

    self.selectedRange = ko.observable(); 
} 
var viewModel = new myVm(); 
ko.applyBindings(viewModel); 

Answer 2

<select type="date" data-bind="options: dateranges, 
      optionsText: 'rangeName', optionsCaption: 'Choose',value:key "> 
    </select> 
    <br> 
    <input type="date" data-bind="value: selectedRangeObj.start , valueUpdate: 'afterkeydown'" /> 
    <br /> 
    <input type="date" data-bind="value: selectedRangeObj.end , valueUpdate: 'afterkeydown'" /> 

    <script type="text/javascript"> 

     function viewModel() { 
      var self = this; 
      self.dateranges = [ 
       {key: "Today", start: "2014-04-28", end: "2014-04-28"}, 
       {key: "Yesterday", start: "2014-04-27", end: "2014-04-27"}, 
       {key: "This Week", start: "2014-04-28", end: "2014-04-05"}, 
       {key: "This Week", start: "2014-04-21", end: "2014-04-27"}]; 
      self.selectedRange = ko.observable(); 
      self.selectedRangeObj = ko.computed(function() { 
       var match = ko.utils.arrayFirst(dateranges(), function(item) { 
        return selectedRange() === item.key; 
       }); 
      }, this); 
     } 
     var myViewModel = new ViewModel(); 
    </script>