与 JavaScript 相互依赖的 <select>答案

【问题标题】：Inter-dependent <select>s with JavaScript与 JavaScript 相互依赖的 <select>
【发布时间】：2010-06-24 05:55:47
【问题描述】：

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

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

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

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

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

【问题讨论】：

由于您没有 jQuery 或其他第三方库，我认为您最好的朋友就是简单地循环（例如，for）。既然是javaScript，你真的没有太多选择。
@rlb.usa：嗯，是的。我只想知道以最简单的方式处理此问题的最佳实践。

标签： javascript html forms

【解决方案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];

希望对您有所帮助。

【讨论】：