设置下拉菜单的默认值

Question

我正在尝试为已有的下拉菜单设置默认值。 下拉菜单显示所有12个月的信息。 它是动态填充的。 但是，我正在尝试使其默认下拉列表值为当前月份。 我正在使用KnockoutJS

以下代码是我如何将信息发送到下拉html代码。

            self.setMonthData = (data: any) => {
            var len = data.List.length,
                i;

            var monthData = [];

            for (i = 0; i < len; i++) {
                self.monthData.push(
                    {
                        name: data.List[i].month,
                        month: data.List[i].monthNumber
                    }
                )
            }
        }

HTML代码：

                <select id="monthSelect" class="select select2" style="margin: 10px;"
                    data-bind="options: monthData,
                                optionsText: 'name',
                                optionsValue: 'month'">
                <option></option>
            </select>

此代码是页面加载方式的功能，具有下拉菜单。

        $(function () {
        ko.applyBindings(viewModel);
        getGridData(initialMonth, initialYear);
        viewModel.load();

        $("#monthSelect").on('change', function () {
            var month = $('#monthSelect').find("option:selected").val();
            var year = $('#yearSelect').find("option:selected").val();
            viewModel.loadChangesData(month, year);
            getGridData(month, year);
        });

        $("#yearSelect").on('change', function () {
            var month = $('#monthSelect').find("option:selected").val();
            var year = $('#yearSelect').find("option:selected").val();
            viewModel.loadChangesData(month, year);
            getGridData(month, year);
        });
    });

Answer 1

您的代码无法正常工作的原因是，您需要设置选择的值。 通过在选择控件中设置值绑定，可以告诉ViewModel您希望在选择下拉列表中保留当前选中的选项。

顺便说一句，如果您使用的是数组，则可能不需要月份号，因为它隐含在monthData数组中每个月份的位置。 即Jan存储在索引0，Feb存储在索引1，依此类推。

 var vm = function() { var self = this; self.months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; self.selectedMonth = ko.observable(self.months[new Date().getMonth()]); } ko.applyBindings(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> Defaulted to current month: <select data-bind="options: months, value: selectedMonth"></select> <br/> <br/> Selected Month: <b data-bind="text: selectedMonth"></b>