0

我的应用程序中有两个下拉菜单：在第一个下拉菜单（选择机构类型）中，我附加了一个 onchange 事件，该事件调用一个 javascript 函数（这个函数进行 ajax 调用），用于填充第二个下拉菜单（选择机构名称）。HTML 代码如下所示：

<label for="typeHighInst">Type of institution: </label>
          <select data-dojo-type="dijit/form/FilteringSelect" data-dojo-id="typeHighInst" id="typeHighInst" name="typeHighInst" onChange="getInstitution(this.value)">
            <option value="" selected='selected'>-- select institution type -- </option>
            <?php foreach($InstitutionType as $institutiontype): ?>
            <option value="<?php echo $institutiontype['TypeID']; ?>"><?php echo $institutiontype['Description'];  ?>
            </option>
            <?php endforeach; ?>
          </select>
<label for="nameHighInst">Name of institution: </label>
          <select data-dojo-type="dijit/form/Select" data-dojo-id="nameHighInst" id="nameHighInst" name="nameHighInst">
            <option value="" selected='selected'>-- select institution --</option>
          </select>

javascript 代码如下所示：

function getInstitution(str)
{
  var xmlhttp;

if (str=="")
{
    document.getElementById("nameHighInst").innerHTML="<option value='' selected='selected'>-- select institution --</option>";
    return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //alert(xmlhttp.responseText);
    document.getElementById("nameHighInst").innerHTML=xmlhttp.responseText;
    }
}

  xmlhttp.open("GET","includes/getInstitution.php?typeHighInst="+str,true);
  xmlhttp.send();
}

问题是当您从第一个下拉列表中选择一个选项（例如大学）时，第二个下拉列表仍然是空的（而不是显示由 ajax 返回的所有大学的列表）。

但是，当我在第二个下拉列表中使用本机选择标签时，一切正常（选择对象有效地填充了所有大学的列表）。

这是使用本机选择元素的代码：

<label for="nameHighInst">Name of institution: </label>
          <select id="nameHighInst" name="nameHighInst">
            <option value="" selected='selected'>-- select institution --</option>
          </select>

有人可以告诉我为什么它适用于本机选择元素而不适用于 dijit/form/FilteringSelect 小部件吗？我是道场新手。我也想知道怎么解决。虽然本机选择有效，但我更喜欢使用 dojo 小部件，因为我发现了它们。

提前致谢。

4

2 回答 2

0

尝试使用 dojo 对象来操作列表：

  var dojo_obj = dijit.byId("nameHighInst");
  dojo_obj.attr("innerHTML",xmlhttp.responseText);

代替

  document.getElementById("nameHighInst").innerHTML=xmlhttp.responseText;

我想你想要的是这样的：

  var dojo_obj = dijit.byId("nameHighInst");
  dojo_obj.attr("options",xmlhttp.responseText);

选项的 xmlhttp.responseText 应该是 JSON 格式：

options: [
  { label: 'TN', value: 'Tennessee' },
  { label: 'VA', value: 'Virginia', selected: true },
  { label: 'WA', value: 'Washington' },
  { label: 'FL', value: 'Florida' },
  { label: 'CA', value: 'California' }
]

示例： http ://dojotoolkit.org/reference-guide/1.7/dijit/form/Select.html

从 dojo 对象获取值时执行相同操作：

  var dojo_obj = dijit.byId("nameHighInst");
  var val = dojo_obj.attr("value");
  var html = dojo_obj.attr("innerHTML");
  var options = dojo_obj.attr("options");
于 2013-03-11T16:58:04.657 回答
0

有多种实现方式

首先，dojo 将解析您的 html 内容 onload，然后对任何 dijit 元素的内部 html 的任何更改都不会反映，除非您手动解析它。

如果您坚持使用 html 更改选项的方式，您将不得不调用

dojo.parser.parse("id of enclosing div");

或者

使用 dojo.attr

从您的 ajax 响应中获取 JSON 格式的选项。

    var option = [{
        label: 'TN',
        value: 'Tennessee'
    },
    {
        label: 'VA',
        value: 'Virginia',
    }]

selectObj = dijit.byId("id of element");
selectObj.attr("options",option);

或者

直接使用 javascript 设置选项值，而不是使用 .attr 函数，然后重新启动组件。

selectObj.options = option;//JSON object
selectObj.restart();
于 2013-03-12T14:44:53.217 回答