javascript - Add Options in Flyout through JavaScript

Question

I have a html snippet as follows

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

Currently, I am adding Years through html. But I want to add them through javascript. So that in future year changes, I do not need to open my code and change it.

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

建议使用内置的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;
}

Answer 3

$(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));
    }
});