通过 JavaScript 在 Flyout 中添加选项答案

【问题标题】：Add Options in Flyout through JavaScript通过 JavaScript 在 Flyout 中添加选项
【发布时间】：2013-06-21 08:41:56
【问题描述】：

我有一个html sn-p如下

     <select id="fiscalFlyout" data-win-control="WinJS.UI.Flyout">
        <optgroup label="Fiscal Year">
            <option>2013</option>
            <option>2014</option>
            <option>2015</option>                
        </optgroup>
     </select>

目前，我正在通过 html 添加年份。但我想通过 javascript 添加它们。这样在未来一年的变化中，我不需要打开我的代码并进行更改。

【问题讨论】：

没有那么痛苦！！！当您考虑天、年、月时，硬编码不是一个坏选择。因为它们是固定的。您大约需要 5 分钟才能达到 2200 年和 80 多年才能达到该日期。所以，您确定要添加一些 JavaScript 吗？？
这就是你需要的！！！ javascriptkit.com/script/script2/curdateform2.shtml

标签： javascript html windows-8 microsoft-metro winjs

【解决方案1】：

Try something like below:

function addOption()
{
var x=document.getElementById("fiscalFlyout");
var option=document.createElement("option");
option.text="your option";
try
  {
  // for IE earlier than version 8
  x.add(option,x.options[null]);
  }
catch (e)
  {
  x.add(option,null);
  }
}
</script>


HTML:

<button type="button" onclick="addOption()">Insert option</button>

【讨论】：

【解决方案2】：

$(document).ready(function () {
    var d = new Date();
    var n = d.getFullYear();
    $('.fiscalFlyout');

    var exists = 0 != $('#fiscalFlyout option[value=' + n + ']').length;
    if (!exists) {
        $('#fiscalFlyout').append($('<option></option>').val(n).html(n));
    }
});

【讨论】：

【解决方案3】：

建议使用内置WinJS.UI.DatePicker 控件。文档中提到的 css 类可用于设置控件样式。 current 属性可用于onchange 事件获取选定日期。

<div data-win-control="WinJS.UI.Flyout" id="flyout">
    <div data-win-control="WinJS.UI.DatePicker">
    </div>
</div>

如果您只想显示年份，下面的 css 会隐藏控件的月份和日期部分。

.win-datepicker-date, .win-datepicker-month
{
    display: none;
}

【讨论】：