Question

我有一个html片段如下

     <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添加Years。但我想通过javascript添加它们。因此，在未来一年的更改中，我不需要打开我的代码并进行更改。

Answer 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>

Answer 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));
    }
});

Answer 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;
}

通过JavaScript在Flyout中添加选项

3 个答案: