如何将多个选择ID传递给ajax函数答案

【问题标题】：How to pass multiple select ids to ajax function如何将多个选择ID传递给ajax函数
【发布时间】：2018-11-13 09:32:27
【问题描述】：

我创建了多选选项，onchange 我想将所有多选 id 传递给 jquery ajax。

目前单选选项参数工作正常。如何对多个选项做同样的事情？

这是我的选择输入和脚本

function update_subscategories_div(id) {
console.log(id);
  jQuery.ajax({
    url: "/get_subscategories",
    type: "GET",
    data: {
      "parent_id": id
    },
    dataType: "html",
    success: function(data) {
      jQuery("#versionsDiv").html(data);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="customer[category_ids][]" id="customer_category_ids_" onchange="update_subscategories_div(this)" multiple="multiple" class="form-control">
  <option value="">Select a parent category</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
</select>

【问题讨论】：

Ajax call on Multiple selection in Select box的可能重复
每次在 SelectBox 中选择选项时都会调用 OnChange。这是正确的方法吗？
@visnu 是的，因为在更改此内容时，我会根据此选择显示子类别。
@SreRoR 你可以尝试 $("#customer_category_ids_").serializeArray() 来获取选定的选项而不是这个吗？

标签： javascript jquery html ajax ruby-on-rails-5

【解决方案1】：

您当前的代码没有多大意义...您将 id 传递给服务器，但这是一个 HTML 元素，而不是选定的 ID（因为您将 this 传递给了函数）。以下是获取所有当前选定 ID 的方法。这会将选择作为数组传递给服务器。

注意我使用了一个 jQuery 不显眼的事件处理程序，这通常被认为是比内联事件处理代码更好的做法（更可见、更可维护、代码与布局分离）。

jQuery(function() {
  jQuery("#customer_category_ids_").change(function() {
    var ids = $(this).val();
    console.log(ids);
    jQuery.ajax({
      url: "/get_subscategories",
      type: "GET",
      data: {
        "ids": ids
      },
      dataType: "html",
      success: function(data) {
        jQuery("#versionsDiv").html(data);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="customer[category_ids][]" id="customer_category_ids_" multiple="multiple" class="form-control">
  <option value="">Select a parent category</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
</select>

【讨论】：

谢谢 ADyson，它工作正常 :)。非常感谢....按照您指示的方式进行操作。