如何将多个Select2值发送到ajax参数中的服务器

Question

我在wep页面中使用了select2下拉列表，我想使用ajax参数将选定的值发送到servlet，我在Ajax下尝试过，但对我来说不起作用。

我的HTML Select代码

<select class="form-control select2" id="color" name="color" multiple="multiple" data-placeholder="Select Colors">
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
    <option>Gray</option>
</select>

我的Ajax代码：

     $.ajax({
         type: 'POST',
         url: 'MyServerUrl',                                
         data: {
            color: $("#color").select2('data') 
            },
         success: function (data, textStatus, jqXHR){
         },
         error: function (data, textStatus, jqXHR) {
         }
     });

有什么方法可以将Direct对象发送到Ajax参数？

Answer 1

$("#color").val(); 将为您提供具有选定值的数组。 例如：

["red", "blue", "gray"]

但是仍然必须为您的选项定义值，因为它们现在没有值。

<select class="form-control select2" id="color" name="color" multiple="multiple" data-placeholder="Select Colors">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="gray">Gray</option>
</select>

使用相同的val方法，您还可以通过编程方式设置值： $("#color").val(["blue", "red"]).trigger("change");

Answer 2

只需使用val（）并在发布变量名称后面添加方括号

 $.ajax({
      type: 'POST',
      url: 'MyServerUrl',
      data: {
          'color[]': $('select.select2').val()
      },
      success: function (data, textStatus, jqXHR){

      },
      error: function (data, textStatus, jqXHR) {
      }
 });

它应该做魔术：）