Взаимозависимый <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];

Надеюсь, это поможет.