How to get Listbox values in controller

Question

I have Two listboxes in view ( Note:Refer the attached Screenshot ).choose rounds(listbox1) and list of rounds(listbox2).I select and move my choices to second listbox.Now I need to get second list box values in controllers and insert that all selected values of second listbox into db.How to do this?

Model:

 public string[] listval { get; set; }

View:

<tr>
                <td align="right">
                    <p id="text" style="width: 90px;">Rounds</p>
                </td>
                <td>
                    @Html.ListBox("lstBox1", new List<SelectListItem>{ 
                     new SelectListItem() {Text = "--Choose Rounds--", Value="None"},
                     new SelectListItem() {Text = "GD", Value="GD"}, 
                     new SelectListItem() {Text = "Written", Value="Written"}, 
                     new SelectListItem() {Text = "Technical1", Value="Technical1"}, 
                     new SelectListItem() {Text = "Technical2", Value="Technical2"},
                     new SelectListItem() {Text = "HR", Value="HR"} 
                    })
                </td>
                <td style='width: 50px; text-align: left; vertical-align: middle;'>
                    <input type='button' id='btnRight' value='  >  ' />
                    <br />
                    <input type='button' id='btnLeft' value='  <  ' />
                </td>
                <td>
                    @Html.ListBoxFor(m=>m.listval, new List<SelectListItem>{ new SelectListItem() {Text = "--List Of Rounds--"} })
                </td>
            </tr>


<script>
    $('#btnRight').click(function (e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#listval').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    $('#btnLeft').click(function (e) {
        var selectedOpts = $('#listval option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });
</script>

Answer 1

Try below script

  <script> $('#btnRight').click(function (e) { var selectedOpts = $('#lstBox1 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#listval').append($(selectedOpts).clone()); $(selectedOpts).remove(); SelectList(); e.preventDefault(); }); $('#btnLeft').click(function (e) { var selectedOpts = $('#listval option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#lstBox1').append($(selectedOpts).clone()); $(selectedOpts).remove(); SelectList(); e.preventDefault(); }); //Here I am using SelectList() function to select options..of second listbox function SelectList() { $("#listval option").each( function (index, option) { //Store the option if (index != 0) $(option).attr("selected", "selected"); } ); } </script>