如何将多个选项的值从选择列表发布到 MVC 控制器？答案

【问题标题】：How can I post multiple option's values from a select list to a MVC controller?如何将多个选项的值从选择列表发布到 MVC 控制器？
【发布时间】：2020-07-12 16:04:08
【问题描述】：

我有一个如下所示的选择列表，我需要将选择列表中的每个选项的值发布到控制器。是否有可能以某种方式获得这些值？

选择列表

<select size="10" id="SelectedSortOrderOptions" name="SelectedSortOrderOptions">
    <option value="Parcel Number">Parcel Number</option>
    <option value="Receipt Number">Receipt Number</option>
    <option value="Municipality">Municipality</option>
</select>

我可以在我的控制器中做类似的事情吗？

public IActionResult Submit(List<string> SelectedSortOrderOptions)
{
   ...
}

我需要获取包含值Parcel Number、Receipt Number 和Municipality 的新字符串列表。

【问题讨论】：

标签： c# asp.net-mvc asp.net-core multi-select

【解决方案1】：

我可以在我的控制器中做类似的事情吗？

是的，你可以这样做。如果要定义一个包含多个选项的选择列表，在视图中，需要在<select>标签中添加multiple属性：

<form method="post" action="/home/submit">
    <select name="SelectedSortOrderOptions" multiple>
        <option value="Parcel Number">Parcel Number</option>
        <option value="Receipt Number">Receipt Number</option>
        <option value="Municipality">Municipality</option>
    </select>
    <button type="submit">Submit</button>
</form>

在控制器中：

[HttpPost]
public IActionResult Submit(List<string> SelectedSortOrderOptions)
{
    return View();
}

在选择多个选项时，您可以按住 Windows 上的 Ctrl 键（或 Mac 上的 command 键）。

【讨论】：

我不需要用户从列表中选择项目，我只需要获取整个列表并将其发送给控制器。该列表由 jquery 从移动到此选择的选项中填充。
@sjohn285 您可以使用相同的方式来执行此操作。但在提交之前，您需要为所有<option> 项目添加selected 属性：<option value="Parcel Number" selected>Parcel Number</option>
@sjohn285 可以通过 jquery 完成：$("#SelectedSortOrderOptions option").prop('selected', true)

【解决方案2】：

您可以使用jquery 获取所有选项并通过ajax 将它们传递给控制器：

<script>
        $('#SelectedSortOrderOptions').change(function (e) {
            var optionsVal =[];
            $("#SelectedSortOrderOptions option").each(function () {
                optionsVal.push($(this).val());
            });
            $.ajax({
                type: 'POST',
                url: '/Home/submit',
                traditional: true,
                dataType: "json",
                data: { SelectedSortOrderOptions: optionsVal },
                success: function () {

                },
            });
        });
    </script>

【讨论】：