javascript - 设置下拉菜单的默认值

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

您的代码不起作用的原因是您需要设置选择的值。通过在选择控件中设置值绑定(bind)，您可以告诉 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>