Question

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

Answer 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>

如何将多个选择ID传递给Ajax函数

1 个答案: