0

私のアプリケーションには 2 つのドロップダウンがあります。最初のドロップダウン (機関の種類を選択) に、2 番目のドロップダウンにデータを入力するための javascript 関数 (これは ajax 呼び出しを行います) を呼び出す onchange イベントを添付しました (機関名を選択してください）。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();
}

問題は、最初のドロップ ダウンから 1 つのオプション (大学など) を選択すると、2 番目のドロップ ダウン リストがまだ空であることです (ajax によって返されたすべての大学のリストが表示されるのではなく)。

ただし、2 番目のドロップダウンでネイティブの select タグを使用すると、すべて正常に動作します (select オブジェクトには、すべての大学のリストが効果的に取り込まれます)。

これは、ネイティブの select 要素を使用したコードです。

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

dijit/form/FilteringSelect ウィジェットではなく、ネイティブの select 要素で機能する理由を教えてください。道場初心者です。直し方も教えていただきたいです。ネイティブの select は機能しますが、dojo ウィジェットを発見したので、dojo ウィジェットを使用することを好みます。

前もって感謝します。

4

2 に答える 2

0

それを達成するための複数の方法があります

まず、dojoはロード時にhtmlコンテンツを解析します。次に、手動で解析しない限り、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);

また

.attr関数を使用する代わりにjavascriptを使用してオプションの値を直接設定してから、コンポーネントを再起動します。

selectObj.options = option;//JSON object
selectObj.restart();
于 2013-03-12T14:44:53.217 に答える
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 に答える