Question

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

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

我需要连续三个<select>，第一个填充列表中的年份，第二个填充第一个选择的年份中的月份，第三个填充相应的日期选定的年份和月份。

我无法访问像jQuery这样的库。

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

Answer 1

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

由于你想要第二个选择填充以响应第一个和第三个基于第二个和第一个填充，你需要一个快速的方法来引用它们。

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

/* 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事件以动态填充其他选择。您可以使用lookups和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];

希望有所帮助。

相互依赖的<select> s with JavaScript </select>

1 个答案: