Javascript 使用prototype ajax.updater更新多个选择选项

我已经阅读了关于构造函数的第一个参数在哪里的文档

–DOM元素，其内容将根据Ajax请求进行更新。可以是DOM节点，也可以是标识节点ID的字符串

但是我想使用更新两个选择框。我应该在第一个参数中传递什么？可能吗

作为参考，html如下所示：

<select id="options_one">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<!-- some other html code -->
<select id="options_two">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

---

两者都包含相同的值，应该在Ajax成功后进行更新。

首先，您可能根本不想像这样更新您的select元素。也许你打算以后以交互方式使用它们，对吗？您可能希望选择一个选项，并让它在浏览器中执行某些操作？如果您只是在select的主体中填充一些选项，您将不会得到这种效果，并且在某些浏览器中，您也不会有任何工作选项

动态更改select的选项的正确方法是操纵select元素的options集合，如下所示：

var new_options = {4: "Four", 5: "Five", 6: "Six"}; // or from your Ajax callback
var options_two = $('options_two'); // reference the select element
options_two.options.length = 0; // remove existing options
for(var i in new_options){
  // use the constructor new Option() to create a new option for each new value/label pair
  options_two.options[options_two.options.length] = new Option(new_options[i], i);
};

new Ajax.Request('your/endpoint', {
  onComplete: function(transport){
    $('your_element').update(transport.responseText);
  }
});

通过这种方式，您附加到select的任何观察者稍后仍将工作，并且浏览器不会丢失有关您在表单方面所做操作的线程

其次，Ajax.Updater是围绕Ajax.Request和Element.update的方便包装器。你可以这样想：

var new_options = {4: "Four", 5: "Five", 6: "Six"}; // or from your Ajax callback
var options_two = $('options_two'); // reference the select element
options_two.options.length = 0; // remove existing options
for(var i in new_options){
  // use the constructor new Option() to create a new option for each new value/label pair
  options_two.options[options_two.options.length] = new Option(new_options[i], i);
};

new Ajax.Request('your/endpoint', {
  onComplete: function(transport){
    $('your_element').update(transport.responseText);
  }
});

为了回答您的问题，在代码中使用Ajax.Updater的方法是将两个select标记包装在一个公共父级中，并让服务器响应返回两个完全组合的select标记。如上所述，这样做的缺点是，页面中已经存在的任何回调都将不再引用原始的select标记-它们已经消失，替换项必须附加新的侦听器。如果将此页保持足够长的打开时间，则每次更换选择器时都会出现内存泄漏

为了将这两个概念结合起来，我在最近的一个项目中是这样做的：

document.on('click', 'input.team', function(evt, elm){
  if($('project_project_template_id')){
    var picker = $('project_project_template_id').enable();
    var team = $$('input.team:checked').first();
    new Ajax.Request('/teams/' + $F(team) + '/project_templates.json', {
      onSuccess: function(xhr){
        var opts = xhr.responseJSON;
        // var none = picker.options[0];
        picker.options.length = 0;
        // picker.options[0] = none;
        opts.each(function(o){
          picker.options[picker.options.length] = new Option(o['name'], o['id']);
        });
      }
    });
  }
});

这是在Rails应用程序中实现的，所以这里有一些约定在我前面的示例中没有，但是您应该能够从中获得一些东西。如果要更新多个选择器，则只需将它们嵌套在JSON响应中，因此服务器会提供类似的内容：

{"options_one": {4: "Four", 5: "Five"}, "options_two": {6: "Six", 7: "Seven"}}

---

然后，您可以用一个Ajax请求更新两个选择器。

使其正常工作。代码如下：

new Ajax.Request('/request/url', {
    method: 'post',
    parameters: {cid: '12', mid: '45'},
    onSuccess: function(transport) {
        var response = transport.responseText;
        $('options_one').update(response);
        $('options_two').update(response);
    },
    onFailure: function(transport) {
        alert('failed ' + transport.responseText);
    }
});

更新

：默认情况下，使用Element.update，这意味着响应的内容将替换容器的全部内容。您可以在不中断现有内容的情况下插入响应文本。插入选项采用四个字符串中的一个-顶部、底部、之前或之后-并以所述方式插入响应的内容

---

所以在我的例子中，使用Ajax.Updater不是一个好选择。

感谢您的时间和详细回答。我通过选择Ajax.Request而不是Ajax.Updater来完成这项工作。请看我的