淘汰賽JS <table> 基於選擇的輸出 <select>選項

Question

是否可以將表的列綁定到<select>元素內的所選選項？ 我的應用程式目前的運作方式如下：

<select> ＃1的所選選項定義了應在<select> ＃2中顯示的選項。 該應用程序的這一部分是完全動態的，並且可以正常工作。

我現在想做的是將表內的列綁定到<select> ＃2中<select>的選項。

默認情況下，表中有5列：2014、2015、2016、2017、2018，我需要將這些列綁定到<select> ＃2。 如果選擇了2016，則表中僅應顯示2016、2017、2018。 如果選擇了2018，則表中僅應顯示2018等。

我猜可以使用淘汰賽實現這一點，但是我不太確定該如何處理。

注意：這純粹是關於顯示/隱藏表列。 在表格列的單元格內部綁定了數值，當其中一個單元格內部的值發生更改時，這些數值將實時彼此相乘。

Answer 1

您可以嘗試以下方法：

<select data-bind='options: availableYears, value: selectedYear'></select>
...
<td data-bind="visible: isYearAfter(2014, selectedYear)">2014</td>
<td data-bind="visible: isYearAfter(2015, selectedYear)">2015</td>
...

var viewmodel = {
    selectedYear: ko.observable(2014),
    availableYears: ko.observableArray([2014, 2015, 2016, 2017, 2018]),
    isYearAfter: function (year, referenceYear) {
        return referenceYear() < year;
    }
};

此處的示例： http : //jsfiddle.net/nyothecat/dP9Uu/1/