预选通过XMLHTTP </select>创建的级联<select>菜单中的选项

时间:2012-07-20 15:36:52

标签: ajax xmlhttprequest selected cascadingdropdown

我已经设置了一系列3个级联选择菜单,其中包含从MySQL数据库中获取的选项。我正在使用onchange事件触发javascript,它使用XmlHttpRequest根据第一个菜单中的选择替换第二个菜单的选项,然后根据第二个菜单中的选择替换第三个菜单的选项。一切都很好。

但后来我想用数据预先填写表格。这是一张时间卡,因此每一行都包含用于选择项目类型,项目编号和任务编号的菜单,然后是每天的小时数,因此我必须预先填写选定的选项和数字以查看已填写的时间当我读入数据时,我使用选择菜单的ID,我想要选择的项目的值以及是否应该只读设置此项目来调用函数。

function preselectMyItem(menuId, itemToSelect, locked) {
   // Get a reference to the drop-down\n";
   var myDropdownList = document.getElementById(menuId);
//   alert(menuId + ', ' + itemToSelect + ', ' + locked);
   // Loop through all the items
   for (iLoop = 0; iLoop< myDropdownList.options.length; iLoop++) {
      if (myDropdownList.options[iLoop].value == itemToSelect) {
         // Item is found. Set its selected property, and exit the loop
         myDropdownList.options[iLoop].selected = true;
         myDropdownList.options[iLoop].readonly = locked;
         myDropdownList.onchange();
         break;
      }
   }
}

这个函数适用于第一个菜单,当我在循环遍历行时这样调用(在PHP中):

   if($myCurrentProjectType[$row]) {
     echo "<script>preselectMyItem('program_type_$row', '$myCurrentProjectType[\
$row]', 1)</script>";
   }

但第二和第三个菜单的调用不起作用

   if($myCurrentProjectNum[$row]) {
     echo "<script>preselectMyItem('program_id_$row', '$myCurrentProjectNum[$ro\
w]', 1)</script>";
   }
   if($myCurrentTaskNum[$row]) {
     echo "<script>preselectMyItem('task_id_$row', '$myCurrentTaskNum[$row]', 1\
)</script>";

如果我取消注释preselectMyItem()函数中的alert(),我可以看到正在使用正确的参数调用该函数。但是,第一个菜单触发的onchange发生得太晚了,第二个和第三个菜单没有填充到我尝试在其中预选的时间。我把上面的两个调用拉到了他们自己的for()循环中,但现在还为时尚早。

XmlHttpRequest的异步特性很不错,但它让我适合这里。有没有办法让我知道第一个菜单的onchange功能何时完成(当我到达那里时,我可以重复使用第二个菜单)?或者也许是做这件事的更好方法?

谢谢!

编辑:修改了代码格式,为了不剽窃,preselectMyItem()基于我在这里找到的代码:http://imar.spaanjaars.com/292/how-do-i-preselect-an-item-in-a-drop-down-list

0 个答案:

没有答案