Question

目前我正在使用dijit/form/Select来显示选项列表，我需要以编程方式更新dijit/form/Select的内容。

目前我正在使用.set('value', ...);，但我注意到事件change已被触发（在我的情况下不需要）。

我需要能够在不触发change事件的情况下更新窗口小部件并选择值。

change事件，afaik，只有在用户＆＃34;更改＆＃34;单击选择列表的值。

＆＃13;

require(["dijit/form/Select",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/domReady!"
], function(Select) {

  var options = [{
    label: "TN",
    value: "Tennessee"
  }, {
    label: "VA",
    value: "Virginia",
    selected: true
  }, {
    label: "WA",
    value: "Washington"
  }, {
    label: "FL",
    value: "Florida"
  }, {
    label: "CA",
    value: "California"
  }];

  var s = new Select({
    options: options
  }, "target");
  s.startup();

  s.on("change", function() {
    console.log("my value: " + s.get("value"))
  });

  // updating options
  options.push({
    label: "MI",
    value: "Milan",
    selected: true
  });
  s.set('options', options);
  s.reset();
  // issue here, the following line trigger event change
  s.set('value', 'mi');

})

＆＃13;

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="target"></div>
</body>

＆＃13;

Answer 1

_setValueAttr还有第二个参数 - priorityChange。如果将其设置为false，则不会触发onChange事件。

从API docs版本1.6（参见方法中的_setValueAttr）：

_setValueAttr
覆盖dijit.form._FormValueWidget，dijit.form._FormSelectWidget
设置窗口小部件的值。 如果值已更改，则触发onChange事件，除非将priorityChange指定为null（或为false？）

顺便说一句。如果您想添加一个选项，则无需替换整套选项 - 您可以致电s.addOption(newOption)

require(["dijit/form/Select",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/domReady!"
], function(Select) {

  var options = [{
    label: "TN",
    value: "Tennessee"
  }, {
    label: "VA",
    value: "Virginia",
    selected: true
  }, {
    label: "WA",
    value: "Washington"
  }, {
    label: "FL",
    value: "Florida"
  }, {
    label: "CA",
    value: "California"
  }];

  var s = new Select({
    options: options
  }, "target");
  s.startup();

  s.on("change", function() {
    console.log("my value: " + s.get("value"))
  });

  // updating options
  options.push({
    label: "MI",
    value: "Milan",
    selected: true
  });
  s.set('options', options);
  s.reset();
  // issue here, the following line trigger event change
  s.set('value', 'Milan', false);

})

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="target"></div>
</body>

Answer 2

我找到了解决此问题的方法：

  myWidget.set('_onChangeActive', false); // prevent firing change
  myWidget.set('value', 'Milan', false);
  myWidget.set('_onChangeActive', true); // reset to default

在多个小部件上连续使用.set()时也适用。

如果您一次只更改一个小部件，那么将false作为第三个参数传递给.set()。

s.set('value', 'Milan', false);

注意：我在官方文档中找不到使用.set()的第三个参数的参考：

相关问题： Dojo Select onChange event firing when changing value programatically

require(["dijit/form/Select",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/domReady!"
], function(Select) {

  var options = [{
    label: "TN",
    value: "Tennessee"
  }, {
    label: "VA",
    value: "Virginia",
    selected: true
  }, {
    label: "WA",
    value: "Washington"
  }, {
    label: "FL",
    value: "Florida"
  }, {
    label: "CA",
    value: "California"
  }];

  var s = new Select({
    options: options
  }, "target");
  s.startup();

  s.on("change", function() {
    console.log("my value: " + s.get("value"))
  });

  // updating options
  options.push({
    label: "MI",
    value: "Milan",
    selected: true
  });

  s.set('options', options);
  s.reset();

  s.set('_onChangeActive', false); // prevent firing change
  s.set('value', 'Milan', false);
  s.set('_onChangeActive', true);

})

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="target"></div>
</body>

可能的错误 - 在widget.set之后触发事件更改（＆＃39; options＆＃39;，[]）

2 个答案: