How can I post multiple option's values from a select list to a MVC controller?

Question

I have a select list like the one below, and I need to post every option's value from the select list to the controller. Is it possible to get these values somehow?

Select List

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

Could I do something similar to this in my controller?

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

I need to get a new list of strings containing the values Parcel Number , Receipt Number , and Municipality .

Answer 1

Could I do something similar to this in my controller?

Yes, you could do that. If you want to define a select list with multiple options, in the view, you need to add multiple attribute to the <select> tag:

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

In the controller:

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

You can hold Ctrl key on Windows (or command key on Mac) while selecting for multiple options.

Answer 2

You can use jquery to get all options and pass them to controller by 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>