将 onChange 事件添加到 Dojo FilteringSelect答案

【问题标题】：Adding an onChange event to a Dojo FilteringSelect将 onChange 事件添加到 Dojo FilteringSelect
【发布时间】：2016-04-20 15:10:22
【问题描述】：

我尝试添加一个 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);
    });
});

【问题讨论】：

我尝试了你的代码。我发现您需要将filteringSelect 的创建与其startup 分开。如果它们是分开的，那么它就可以正常工作（尽管 value 由于显而易见的原因总是未定义）。虽然我不知道与 DOJO 网站上的示例相同的原因是什么，但它们都在一个语句中。

标签： javascript dojo

【解决方案1】：

dijit/form/FilteringSelect 作为一个奇怪的 API。 onChange 会在用户在文本框中键入内容时触发，当您在打开的列表中选择某些内容以自动完成时，但是当您从使用下拉按钮打开的列表中选择某些内容时，NOT 会触发。

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

【讨论】：