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