Javascript 解析分组json

我有这个JSON结构：

{
 "2014": [
  "2014-01",
  "2014-02",
  "2014-03",
  ...
],
 "2015": [
  "2015-01",
  "2015-02",
  "2015-03",
  ...
]
}

。。。需要将JSON解析成这样的HTML结构，无论是否使用Jquery

<select name="valueAA" id="valueAA">
    <optgroup label="2014">
        <option value="2014-01">Jan 2014</option>
        <option value="2014-02">Feb 2014</option>
        <option value="2014-03">Mar 2014</option>
                ...
    </optgroup>
    <optgroup label="2015">
        <option value="2015-01">Jan 2015</option>
        <option value="2015-02">Feb 2015</option>
        <option value="2015-03">Mar 2015</option>
                ...
    </optgroup>
</select>

2014年1月
2014年2月
2014年3月
...
2015年1月
2015年2月
2015年3月
...

谢谢大家!

---

更新：我更新了JSON

您可以通过使用

jQuery

和

moment.js

对日期格式进行更新：

HTML:

JS:

var对象={
"2014": [
      "2014-01",
      "2014-02",
      "2014-03"
    ],
"2015": [
"2015-01",
"2015-02",
"2015-03"
]
};
var$select=$（“#日期”）；
$。每个（对象、功能（年份、日期）{
var$optgroup=$（''）.attr（'标签'，年份）；
$。每个（日期、功能（键、日期）{
$optgroup.append（
$('')
.val（日期）
.text（时刻（日期，'YYYY-MM'）。格式（'MMM-yyy'））
);
});
$select.append（$optgroup）；
});

与旧浏览器兼容的javascript解决方案：

var数据={
dataLabel:['valueData']
};
（功能（）{
"严格使用",；
var标签，
价值
//其他变量
select=document.createElement（'select'），
optgroup，
选项
日期；
select.id='valueAA'；
select.name='valueAA'；
用于（数据中的标签）
if（data.hasOwnProperty（标签））{
//您希望如何处理标签
optgroup=document.createElement（'optgroup'）
optgroup.setAttribute（'label'，label）；
选择.appendChild（optgroup）；
for（数据[标签]中的值）
if（数据[label].hasOwnProperty（值））{
//您希望如何处理值
日期=新日期（值）；
option=document.createElement（'option'）
option.setAttribute（'value'，value）；
optgroup.appendChild（选项）；
optgroup.innerHTML=date.toDateString（）.replace（/^.*\s（.....*\s.*\s（.*）/，“$1$2”）；
}
}
window.console.log（选择）；
document.body.appendChild（选择）；
}（））；

纯Javascript解决方案：

var数据={
"2014": [
"2014-01",
"2014-02",
"2014-03"
],
"2015": [
"2015-01",
"2015-02",
"2015-03"
]
};
空洞函数（）{
var form=document.createElement（'form'），
select=document.createElement（'select'）；
select.id='valueAA'；
select.name='valueAA'；
Object.keys（data）.map（Number）.sort（函数（a，b）{returna-b；}）.forEach（函数（k）{
var optgroup=document.createElement（'optgroup'）；
optgroup.label=k；
数据[k].forEach（函数（a）{
var d=新日期（a），
option=document.createElement（'option'），
月份=[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’、‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]；
option.text=MONTH[d.getMonth（）]+''+d.getFullYear（）；
option.value=a；
optgroup.appendChild（选项）；
});
选择.appendChild（optgroup）；
});
form.appendChild（选择）；
文件.正文.附件（表格）；
}（）；

使用递归：

var json={
"2014": [
"2014-01",
"2014-02",
"2014-03"
],
"2015": [
"2015-01",
"2015-02",
"2015-03"
]
};
函数加载选择（数据）{
for（var输入数据）{
if（数据[key].constructor==数组）{
var optG=document.createElement（'optgroup'）；//optgroup创建
setAttribute（'label'，key）；//在optgroup上设置标签
对于每个数组上的（var i=0；i

u尝试的内容？？显示脚本首先纠正json结构无效。应该有键值对。@Akhilessingh我不知道如何开始。@Jai我更新了json。

<select id="dates"></select>

var object = {
    "2014": [
      "2014-01",
      "2014-02",
      "2014-03"
    ],
    "2015": [
        "2015-01",
        "2015-02",
        "2015-03"
    ]
};

var $select = $('#dates');

$.each(object, function(year, dates) {
    var $optgroup = $('<optgroup/>').attr('label', year);
    $.each(dates, function(key, date) {
        $optgroup.append( 
            $('<option/>')
                .val(date)
                .text( moment(date, 'YYYY-MM').format('MMM YYYY') )
        );
    });
    $select.append($optgroup);
});