相互依存 <select>使用JavaScript

Question

我有一个日期的javascript数组，形式为

{year:'2010',month:'6',day:'23'}

我需要连续三个<select> ，第一个填充列表中的年份，第二个填充第一个选择的年份中的月份，第三个填充与所选年份对应的天，月。

我无权访问jQuery之类的库。

处理此问题的最佳方法是什么？

Answer 1

要检索年份数据以设置初始选择，您必须至少遍历一次数组（希望仅遍历一次）。

由于事实上您希望根据第二个和第一个填充第二个选择，以响应第一个和第三个填充，因此您需要一种快速的方法来引用它们。

我最初会填充选择内容，同时将数据整理到更易于检索的系统中。 我在这里使用带有键的数组，其他人可能建议最好使用带键的对象。

/* Global variables */
var arr = new Array({year:'2010',month:'6',day:'23'},
                    {year:'2011',month:'6',day:'23'},
                    {year:'2010',month:'5',day:'23'});
var srt = new Array();

function populateArrs()
{
for(var i=0;i<arr.length;i++)
{
  var y = arr[i].year;
  var m = arr[i].month;
  var d = arr[i].day;
  var in_select = false;

  /* Month array, day array */
  var mArr;
  var dArr;

  if(srt[y] != null)
  {
    mArr = srt[y];
    in_select = true;
  }
  else
    mArr = new Array();


  if(mArr[m] != null)
    dArr = mArr[m];
  else
    dArr = new Array();

  if(dArr[d] == null)
    dArr[d] = d;
  /* No else as at this stage it will already exist in array set */

  mArr[m] = dArr;
  srt[y] = mArr;

  /* Don't duplicate values in the select */
  if(!in_select) 
  {
    var opt = document.createElement('option');
    opt.value = y;
    opt.text = y;
    /* Get your year select */
    var ySel = document.getElementById('year_select'); 
    ySel.appendChild(opt);
  }
}
}

if (window.addEventListener)
  window.addEventListener("load", populateArrs, false);
else if (window.attachEvent)
  window.attachEvent("onload", populateArrs);

之后，您需要设置onclick事件以动态填充其他选择。 您可以使用查找和for..in循环简单地引用适当的数组。

月份：

var ySel = document.getElementById('year_select');
var mArr = srt[ySel.options[ySel.selectedIndex].value];
for( x IN mArr)
  /* Populate month select */

天：

/*As above, then */
var mSel = document.getElementById('month_select');
var dArr = srt[mSel.options[mSel.selectedIndex].value];

希望能有所帮助。