根据彼此自动更改 2 个字段答案

【问题标题】：Change 2 fields automatically based on each other根据彼此自动更改 2 个字段
【发布时间】：2017-09-14 06:12:53
【问题描述】：

我正在使用selectize.js，我有 2 个选择字段：

$('#field1').selectize();
$('#field2').selectize();

当第一个字段已更改（或选择）时，我想自动更改第二个的值；反之亦然，当第二个的值改变（或选择）时，改变第一个的值。

我用的是change函数，像这样：

$("#field1").change(function () {
    var d = 'value-field2'
    var $select_field2 = $("#id_field2").selectize();
    var selectize_field2 = $select_field2[0].selectize;
    selectize_field2.setValue(d);
  });

  $("#field2").change(function () {
      var d = 'value-field1'
      var $select_field1 = $("#id_field1").selectize();
      var selectize_field1 = $select_field1[0].selectize;
      selectize_field1.setValue(d);
  });
  });

但是在这里我无限调用这两个函数，互相调用，因为它们互相改变。我尝试使用mouseover() 或click() 而不是change()，但没有成功。

有什么想法吗？

【问题讨论】：

你能创建一个小提琴或发布重现问题所需的最低代码吗？
我更新了代码示例。这有帮助吗？
请添加 HTML

标签： javascript jquery ajax selectize.js

【解决方案1】：

您需要某种变量来识别 JavaScript 何时更改值而不是用户。你可以使用这样的东西：

var programmaticallyChanging = false;

$("#field1").change(function() {
    if (!programmaticallyChanging) {
        var d = 'value-field2'
        var $select_field2 = $("#id_field2").selectize();
        var selectize_field2 = $select_field2[0].selectize;
        programmaticallyChanging = true;
        selectize_field2.setValue(d);
        programmaticallyChanging = false;
    }
});

$("#field2").change(function() {
    if (!programmaticallyChanging) {
        var d = 'value-field1'
        var $select_field1 = $("#id_field1").selectize();
        var selectize_field1 = $select_field1[0].selectize;
        programmaticallyChanging = true;
        selectize_field1.setValue(d);
        programmaticallyChanging = false
    }
});

如果可能，以编程方式将 var 放入Changing = false;进入某些功能，使其不会暴露在窗口上。

【讨论】：

成功了。识别 JS 何时更改值的好点。