Select Multiple with jQuery Chosen

Question

I have a class Client, and a class System Man client may have more than one system, and a system, may have more than one client.

I have a select Multiple capo, in my edit view, which loads the systems that my client uses.

and if I click on the field, it shows the systems that my client uses:

only that the reality is that I wanted to present the systems that my client uses, already selected. that way:

I use Razor, so that’s the select code:

 @Html.DropDownList("SistemasComerciais", new SelectList(ViewBag.SistemasComerciais, "Id", "Descricao"), htmlAttributes: new { @class = "standardSelect", multiple = "multiple", placeholder = "Selecione..." })

And this is the HTML code that generates.

<select class="standardSelect" id="SistemasComerciais" multiple="multiple" name="SistemasComerciais" placeholder="Selecione..." style="display: none;">
<option value="1">CT-e</option>
<option value="2">MERCHANT</option>
</select>

<div class="chosen-container chosen-container-multi" title="" id="SistemasComerciais_chosen" style="width: 100%;"><ul class="chosen-choices">
  <li class="search-field">
    <input class="chosen-search-input default" type="text" autocomplete="off" value="Select Some Options" style="width: 179px;">
  </li>
</ul>
<div class="chosen-drop">
  <ul class="chosen-results">
  <li class="active-result" data-option-array-index="0">CT-e</li>
  <li class="active-result" data-option-array-index="1">MERCHANT</li>
  </ul>
</div>
</div>

Could someone tell me how I do so the systems are already selected? i use this plugin, to function select Multiple:

<script src="~/Template/vendors/chosen/chosen.jquery.min.js"></script>

If anyone knows at least one tutorial, article, anything, in which there is an explanation for how I can do this, it would be helpful!

Answer 1

Before calling the .chosen(), place the attribute selected in all select options:

$("#SistemasComerciais")
.find("option")
.prop("selected", true)
.end()
.chosen();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<select class="standardSelect" id="SistemasComerciais" multiple="multiple" name="SistemasComerciais" placeholder="Selecione..." style="width: 100%;">
   <option value="1">CT-e</option>
   <option value="2">MERCHANT</option>
</select>