2016-04-19 15 views
0

Ich habe versucht, ein onChange-Ereignis hinzuzufügen, das jedes Mal ausgelöst werden soll, wenn im FilteringSelect eine Auswahl getroffen wird, aber es scheint nicht ausgelöst zu werden. Ich habe versucht, die Aktion in der on-Funktion zu ändern und onChange und beide arbeiten nicht. Ich habe versucht, onChange als Parameter der FilteringSelect zu haben, aber das hat auch nicht funktioniert.Hinzufügen eines OnChange-Ereignisses zu einem Dojo FilteringSelect

Ich benutze Dojo 1.10.

require(["dijit/form/FilteringSelect", "dojo/store/Memory", "dojo/dom", "dojo/on", "dojo/domReady!"], 
    function(FilteringSelect, Memory, dom, on) { 
    var filteringSelect = new FilteringSelect({ 
     id: "zoom", 
     name: "zoom", 
     value: "z", 
     intermediateChanges: true, 
     store: new Memory({ 
     data: [ 
      {name:"Zoom", value:"z"}, 
      {name:"50%", value:".5"}, 
      {name:"75%", value:".75"}, 
      {name:"100%", value:"1"}, 
      {name:"125%", value:"1.25"}, 
      {name:"150%", value:"1.5"}, 
      {name:"175%", value:"1.75"}, 
      {name:"200%", value:"2"} 
     ] 
     }), 
     searchAttr: "name" 
    }, "zoomDiv").startup(); 
    on(filteringSelect, 'change', function(value) { 
     console.log(value); 
    }); 
}); 
+0

Ich habe versucht, eine Geige des Codes zu sehen. Was ich gefunden habe, ist, dass Sie die Erstellung von 'filteringSelect' und dessen' startup' trennen müssen. Wenn sie getrennt sind, dann funktioniert es gut (obwohl der "Wert" aus offensichtlichen Gründen immer undefiniert ist). Obwohl ich nicht weiß, was der Grund für das gleiche ist wie in den Beispielen auf der DOJO-Website, sind sie in einer einzigen Aussage. – Himanshu

Antwort

0

dijit/form/FilteringSelect als eine seltsame API. Die onChange wird ausgelöst, wenn der Benutzer etwas in das Textfeld eingibt, wenn Sie etwas in der Liste zur automatischen Vervollständigung auswählen, aber NICHT, wenn Sie etwas in der Liste aus der geöffneten Dropdown-Taste auswählen.

Für eine konsistente Veranstaltung können Sie die Eigenschaft displayedValue

require(["dijit/form/FilteringSelect", "dojo/store/Memory", "dojo/dom", "dojo/on", "dojo/domReady!"], 
 
    function(FilteringSelect, Memory, dom, on) { 
 
    var filteringSelect = new FilteringSelect({ 
 
     id: "zoom", 
 
     name: "zoom", 
 
     value: "z", 
 
     intermediateChanges: true, 
 
     store: new Memory({ 
 
     data: [{ 
 
      name: "Zoom", 
 
      value: "z" 
 
     }, { 
 
      name: "50%", 
 
      value: ".5" 
 
     }, { 
 
      name: "75%", 
 
      value: ".75" 
 
     }, { 
 
      name: "100%", 
 
      value: "1" 
 
     }, { 
 
      name: "125%", 
 
      value: "1.25" 
 
     }, { 
 
      name: "150%", 
 
      value: "1.5" 
 
     }, { 
 
      name: "175%", 
 
      value: "1.75" 
 
     }, { 
 
      name: "200%", 
 
      value: "2" 
 
     }] 
 
     }), 
 
     searchAttr: "name" 
 
    }, "zoomDiv"); 
 
    filteringSelect.startup(); 
 
    filteringSelect.watch('displayedValue', function(property, oldValue, newValue) { 
 
     alert(property + ':' + newValue); 
 
    }); 
 

 
    });
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"/> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css"/> 
 
<div class="tundra"> 
 
<div id="zoomDiv"></div> 
 
</div>

Verwandte Themen