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

Question

我正在使用 selectize.js 并且我有 2 个 select 字段：

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

我想在第一个字段更改（或 selected）时自动更改第二个的值；反之亦然，当 second 的值改变时改变 first 的值（或 selected）。

我正在使用 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 programmaticallyChanging = false;进入某个函数，这样它就不会暴露在 window.

上

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

Change 2 fields automatically based on each other

javascript

jquery

ajax

selectize.js