1

我有一个带有 3 个下拉列表的表单 - A、B 和 C。当 A 更改时，B 应该使用新的选项列表进行更新，并且 C 应该被清除。当 B 更改时，应使用新的选项列表更新 C。

我有 A、B 和 C 的部分，并且 A 和 B 都包含observe_field对 watch 本身的调用。

每次 A 更改时，B 都会重新加载并添加一个新的观察者。这意味着每次 B 更改时，都会触发 N+1 个重新加载 C 的请求（其中 N 是 A 更改的次数）。

我已经尝试将observe_field调用移出替换 B 的下拉列表的部分（将其放置在 A 的部分中），但是在第一次更改为 A 之后，B 不再触发事件。

我也尝试在 B 上添加对观察者的$('b').stopObserving();调用:before，但这具有相同的效果 - 在第一次更改 A 之后，事件停止在 B 上触发。

有没有办法使这项工作？

编辑：

以下是observe_field调用生成的 Javascript：

new Form.Element.EventObserver('a', function(element, value) {
  $('b_loading_indicator').show();
  new Ajax.Updater('b',
    'http://localhost:3000/foos/b_control', {
      asynchronous: true,
      evalScripts: true,
      onComplete: function(request) { $('b_loading_indicator').hide(); },
      parameters: 'a_id=' + encodeURIComponent(value) + '&object_name=foo' + '&authenticity_token=' + encodeURIComponent('kH/TmOfvSKeNLxO4N0gxtqV0niNfAUlJ3guk6KAvPig=')
    });
});

new Form.Element.EventObserver('b', function(element, value) {
  $('c_loading_indicator').show();
  new Ajax.Updater('c', 
    'http://localhost:3000/foos/c_control', {
      asynchronous: true,
      evalScripts: true,
      onComplete: function(request) { $('c_loading_indicator').hide(); },
      parameters: 'a_id=' + encodeURIComponent($('a').value) + '&b_id=' + encodeURIComponent(value) + '&object_name=foo' + '&authenticity_token=' + encodeURIComponent('kH/TmOfvSKeNLxO4N0gxtqV0niNfAUlJ3guk6KAvPig=')
  });
});
4

1 回答 1

0 
 $(document).ready(function() {
   $("#section").bind("keyup", function() {
   data = {this.name: this.val()}; // the value of input that need to send to server
   $.get(url, data, // make ajax request
     function(html) { // function to handle the response
      $("#article_list").html(html); // change the inner html of update div
     });
   });
 });
于 2013-05-03T09:19:32.247 回答