时间戳

首页 > 解决方案 > 如何将多个选择ID传递给ajax函数

javascript - 如何将多个选择ID传递给ajax函数

问题描述

我已经创建了多个选择选项，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>

标签： javascriptjqueryhtmlajaxruby-on-rails-5

解决方案

您当前的代码没有多大意义……您正在传递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>

推荐阅读