如何将数组从选择列表发送到ajax答案

【问题标题】：How to send Array from Select List to ajax如何将数组从选择列表发送到ajax
【发布时间】：2021-10-10 02:22:50
【问题描述】：

我是 Ajax 新手，我找不到任何正确传递数据的方法，我的子类别依赖于类别输出，我现在的问题是，当我在类别中选择 2 个或更多项目时，输出的子类别不要相互堆积。

我知道我必须将我的类别放在数组中，但我不知道如果数据出现在选择列表中它将如何工作。

我的过滤器

<div class="col-lg-3 col-md-3 col-sm-3">
 <select id="assignedCategory" class="form-control selectpicker" title="Category" value="@ViewBag.AssignedCategory" asp-items="@ApplicationCategory" multiple asp-for="@category" onchange="GetSubCat();">
 </select>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
 <select id="assignedSubCategory" class="form-control selectpicker" title="Sub-Catergory" multiple>
 </select>
</div>

Ajax

function GetSubCat() {
 $('#assignedSubCategory').html('');
 $.ajax({
  url: '@Url.Action("GetSubCat")',
  type: 'post',
  dataType: 'json',
  data: {
   CatId: $('#assignedCategory option:selected').val() <!--This Part Right Here, I don't know how to make this an Array.-->
  },
  success: (data) => {
   $.each(data, (i, e) => {
    var elem = '<option value="' + e.value + '">' + e.text + '</option>'
    $('#assignedSubCategory').append(elem);
    $('#assignedSubCategory').selectpicker('refresh');
   });
  }
 });
}

控制器

[HttpPost]
[AllowAnonymous]
public JsonResult GetSubCat(int?[] CatId)
{
 var getCat = db.Subcategories.FromSqlRaw($@"
 select sc.* from CRM_Subcategories sc
 left join CRM_Categories c on sc.CategoryId = c.Id
 where c.Id IN ({CatId})").Select(x => new SelectListItem
 {
  Value = x.Id.ToString(),
  Text = x.Value
 }).ToList();
 return Json(getCat);
}

【问题讨论】：

标签： ajax asp.net-mvc asp.net-core

【解决方案1】：

1.你可以得到如下选择的数组：

$('#assignedCategory').val();

2.当您在选择列表中选择一个选项时，将触发onchange 事件。也就是说如果你选择多个选项，它会多次触发GetSubCat函数，并多次post到后端。 如果你不关心这个。只需将 ajax 发布数据更改为：$('#assignedCategory').val();。

3.您在代码中使用了selectpicker，看来您在项目中使用了Bootstrap-select 插件。 Bootstrap-select 公开了一些用于挂钩选择功能的事件。我认为您可以使用hidden.bs.select 事件将您选择的数组列表发布到后端。当下拉菜单完成对用户隐藏时触发此事件。 也就是说它会在选择菜单关闭时触发ajax。

这是一个工作示例：

<div class="col-lg-3 col-md-3 col-sm-3" id="category">   //add id here...
    <select id="assignedCategory" class="form-control selectpicker" title="Category" value="@ViewBag.AssignedCategory" multiple >
        <option value="1">aa</option>
        <option value="2">bb</option>
        <option value="3">cc</option>
    </select>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
    <select id="assignedSubCategory" class="form-control selectpicker" title="Sub-Catergory" multiple>
    </select>
</div>
@section Scripts
{
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    <script>
        $('#category').on('hide.bs.select', function (e) {
             $.ajax({
                  url: '@Url.Action("GetSubCat")',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      CatId: $('#assignedCategory').val()
                  },
                  success: (data) => {
                   $.each(data, (i, e) => {
                    var elem = '<option value="' + e.value + '">' + e.text + '</option>'
                    $('#assignedSubCategory').append(elem);
                    $('#assignedSubCategory').selectpicker('refresh');
                   });
                  }
                 });
        });       
    </script>
}

【讨论】：