Problem when correctly rendering a select HTML

Question

I have the following tag select:

<select asp-for="@Model.EstadosServicos" asp-items="Html.GetEnumSelectList<EstadoServico>()" id="tipo" class="form-control"></select>

that creates this panel:

This rendered HTML in the browser generates this code containing, automatically, the attribute multiple="multiple":

<select id="tipo" class="form-control" multiple="multiple" name="EstadosServicos">
    <option value="0">Inicial</option>
    <option value="1">Intermediário</option>
    <option value="2">Cancelado</option>
    <option value="3">Final</option>
</select>

in the element inspection, when removing the multiple="multiple" it then changes to the format of select that I need.

The point is, how do I write my HTML so that it creates the select as in the figure below? Or even, what should I do for that attribute multiple="multiple" is not considered when rendering the page?

Answer 1

If you use JQuery can put the code on your page.

<script>
  $(document).ready(function(){
    $('#tipo').removeAttr('multiple');
  })
</script>