Question

我的应用程序中有两个下拉列表：第一个下拉列表（选择机构类型），我附加了一个调用javascript函数的onchange事件（这个调用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小部件，因为我发现它们。

提前致谢。

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");

OR

使用dojo.attr

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

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

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

OR

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

selectObj.options = option;//JSON object
selectObj.restart();

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

2 个答案: