用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();