1. 程式人生 > >Js 實現下拉款選擇後多級聯動效果

Js 實現下拉款選擇後多級聯動效果

  後臺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">