用Ajax响应文本填充dojo dijit / form / FilteringSelect

Question

我的应用程序中有两个下拉菜单：在第一个下拉菜单（选择机构类型）中，我附加了一个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返回的所有大学的列表）。

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

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

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

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

提前致谢。

Answer 1

尝试使用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");

Answer 2

有多种实现方法

首先，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();