Pick the fields of a Select and pass to viewmodel

Question

Guys I own two Selects Multiple where their function is to change values as shown in the image below:

The first in real is a Dropdownlist where he searches the bank’s information, follows its code:

 @Html.DropDownList("Avaible", ViewBag.Account as SelectList, new { multiple = "multiple", id = "Avaliable", name = "Avaliable" })

The other is one Select that receives these values, follows its code:

 <select style="width:70px" id="Included" name="Included" multiple></select>

The two buttons transition data from one to the other via Javascript:

function Incluir() {
    $("#Included").append($("#Avaliable option:selected"));
}

And then it populates the select that receives the values, the problem is, need to take these values and store in a variable of Viewmodel Call Accounts

  public List<int> Accounts { get; set; }

I tried to do Javascript method that returns all Select values, but I can’t store it in the Accounts variable, this is the function I did:

function displayResult() {
    var x = document.getElementById("Included");
    var array = [];
    var i;
    for (i = 0; i < x.length; i++) {
        array[i] = x.options[i].value;
    }
    alert(array);
    $('#Accounts').push(array);
}

But he can’t get Accounts popular, could anyone help me how popular this Accounts List with Select values ? If you have a better method or help to transfer the Array to Accounts. Ah forgot to mention, the View has a field referencing the Accounts:

@Html.HiddenFor(m => Model.Accounts)

Answer 1

You don’t need to store the selection in a "Accounts" input that can even be done but you will need to change your model and add new treatments in the backend to process the entry

As suggested in the comments, one solution is to rename your second select with the name="Accounts[]" and ensure that all your items are selected before you do Ubmit for your controller.

function Incluir() {
  $("#Accounts").append($("#Avaliable option:selected"));
}

function displayResult() {
  //Essa linha de código vai selecionar todos os itens que existem
  //no select #Accounts para garantir a sua persistência à Controller
  $("#Accounts option").prop('selected', true);


  console.log($("#Accounts").val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<select style="width:70px" id="Avaliable" name="Avaliable" multiple>
  <option value="123">123</option>
  <option value="321">321</option>
  <option value="111">111</option>
  <option value="222">222</option>
  <option value="333">333</option>
</select>
<button id="Adicionar" onclick="Incluir()">></button>
<select style="width:70px" id="Accounts" name="Accounts[]" multiple></select>
<br>
<button onclick="displayResult()">Enviar</button>