Js 實現下拉款選擇後多級聯動效果
阿新 • • 發佈:2019-02-08
後臺js實現:
self.StartTimeInfo = ko.observable();
self.EndTimeInfo = ko.observable();self.ShiftNameList = ko.observableArray([{ NAME: '白班', VALUE: '白班', start: self.getCurrentDate() + " 8:00", endtime: self.getCurrentDate() + " 17:59" }, { NAME: '小夜班', VALUE: '小夜班', start: self.getCurrentDate() + " 18:00", endtime: self.getCurrentDate(1) + " 00:59" }, { NAME: '大夜班', VALUE: '大夜班', start: self.getCurrentDate() + "8:00", endtime: self.getCurrentDate(1) + " 7:59" }, { NAME: '24小時', VALUE: '24小時', start: self.getCurrentDate() + " 7:59", endtime: self.getCurrentDate(1) + " 8:00" }]);
self.shiftNameInfo = ko.observable();
self.shiftNameInfo.subscribe(function (newvalue) {
$.each(self.ShiftNameList(), function (i, value) {
if (value.NAME == newvalue) {
self.StartTimeInfo(value.start);
self.EndTimeInfo(value.endtime);
}
})
})
前臺介面繫結:
<select class="" data-bind="options: $root.ShiftNameList, value: $root.shiftNameInfo, optionsValue: 'NAME', optionsText: 'VALUE'">
</select>
時間:<input placeholder="開始日期" id="start" data-bind="value: $root.StartTimeInfo">至<input placeholder="結束日期" id="end" data-bind="value: $root.EndTimeInfo">