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 programmaticallyChanging = false;进入某个功能，使其不会暴露在窗口上。

相互自动更改2个字段

1 个答案: