将 onChange 事件添加到 Dojo FilteringSelect

Question

我尝试添加了一个 onChange 事件，每次在 FilteringSelect 上进行选择时我都想触发它，但它似乎没有触发。我正在尝试让 on 函数中的操作既是 change 又是 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 当用户在文本框中键入内容时触发，当您 select 列表中的内容打开以自动完成时，但 NOT 当您 select 使用下拉按钮打开的列表中的内容。

对于一致的事件，您可以观看属性 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>

将 onChange 事件添加到 Dojo FilteringSelect

Adding an onChange event to a Dojo FilteringSelect

javascript

dojo