如何在rails中使用jquery更新选择？

Question

我的 _form2.html.erb 中有以下脚本：

<script type="text/javascript">
$(function () {
        $('#toright').click(function () {
            var sel = document.getElementById("left");
            var len = sel.options.length;
            var w_id = this.getAttribute('w_id');
            for (var i = 0; i < len; i++) 
                {
                if(sel.options[i].selected) 
                    {
                    $.ajax("/r_holidays/destroy", {holiday_id: sel.options[i].value, group_id: w_id}).done(function(data){/*do something here*/});
                    ##########HERE SHOULD BE AN UPDATE-METHOD########
                    }
                }
        })
      });

$(function () {
        $('#toleft').click(function () {
            var sel = document.getElementById("right");
            var len = sel.options.length;
            var w_id = this.getAttribute('w_id');
            for (var i = 0; i < len; i++) 
                {
                if(sel.options[i].selected) 
                    {

                    $.ajax("/r_holidays/create", {holiday_id: sel.options[i].value, group_id: w_id}).done(function(data){/*do something here*/});
                    ##########HERE SHOULD BE AN UPDATE-METHOD########
                    }
                } 
        })
      });
</script>

这只会创建这个小的交换表：

绿色选择的ID是“left”，右边的是“right”。 我想要的是它在执行 AJAX 方法时更新左表。

我已经google了很多，但我找不到方法，我需要。 谁能帮帮我？

编辑@Anoop Joshi:

好吧，我认为它可以在服务器端重新渲染内容，然后在客户端重新加载它。 这是我的代码，需要重新加载：

<%= form_tag({}, {}) do %>
    <% holidays_array = @group.holidays.all.map { |holiday| [holiday.name, holiday.id] } %>
    <%= select(:holiday_id, :name, options_for_select(holidays_array),{}, {:multiple => true, :style => "width: 300px; background-color: #9FE", :width => "300", :size => 20, :id=>"right" }  ) %>
<% end %>

编辑：

我不想在我的选择中添加一些选项。我只需要更新整个选择，或者如果需要在文件中更新。

Answer 1

假设您的成功数据如下所示，

data = [{
    "id": 123,
    "value": "abc"
}, {
    "id": 1234,
    "value": "abcas"
}, {
    "id": 1232,
    "value": "abcs"
}];

那么你的代码就是，

$.ajax("/r_holidays/destroy", {
    holiday_id: sel.options[i].value,
    group_id: w_id
}).done(function (data) {

    $(data).each(function () {
        $("#left").append($("<option/>", {
            value: this.id,
            html: this.value
        }));
    });

});