javascript - 根据彼此自动更改 2 个字段

Question

我正在使用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() 但没有成功使其工作。

有什么想法吗？

Answer 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 更改为 false；进入某些函数，以便它不会暴露在窗口上。