为下拉菜单设置默认值答案

【问题标题】：Set default value for a dropdown为下拉菜单设置默认值
【发布时间】：2016-07-11 16:58:14
【问题描述】：

我正在尝试为我拥有的下拉菜单设置默认值。下拉菜单包含所有 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);
        });
    });

【问题讨论】：

标签： javascript jquery html knockout.js drop-down-menu

【解决方案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>

【讨论】：