如何将多个select id传递给ajax函数

Question

我已经创建了多选选项，一旦更改，我想将所有多选ID传递给jquery ajax。

目前单选选项params运行良好。如何对多个选项执行相同操作？

这是我选择的输入和脚本

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。这将把所选内容作为数组传递给服务器。

N。B.我使用了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>