將onChange事件添加到Dojo FilteringSelect

Question

我嘗試添加一個onChange事件，我想在每次在FilteringSelect上進行選擇時觸發，但它似乎沒有觸發。 我試圖讓on函數中的動作既改變又改變onChange並且都不起作用。 我嘗試將onChange作為FilteringSelect的參數，但這也不起作用。

我正在使用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);
    });
});

Answer 1

dijit/form/FilteringSelect作為一個奇怪的API。 當用戶在文本框中鍵入內容時，當您在為自動完成打開的列表中選擇某些內容時會觸發onChange ，但是當您從打開的使用下拉按鈕中選擇列表中的內容時，則不會觸發onChange 。

對於一致的事件，您可以觀看屬性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>