Clear multi select dropdown using JavaScript

Question

I am trying to clear a multi-select dropdown using javascript as shown by the image below

Class

    [MultiSelect("GetLookUps", 6)]
    public int[] HoldItemsArr { get; set; }

Chtlm

<div class="row form-group">
 @Html.RequiredLabelFor(model => model.HoldItemsArr, new { @class = "control-label col-md-5" })
 <div class="col-md-7">
 @Html.EditorFor(model => model.HoldItemsArr, new { htmlAttributes = new { @class = "form-control", multiple = "multiple" } })
 @Html.ValidationMessageFor(model => model.HoldItemsArr, "", new { @class = "text-danger" })
   </div>
</div>

JavaScript

 if (($("#ReasonForLeaving").val() == 15)) {
     $("#ResignationInfo").show();
 }
 else {
     // I tried all the option below 
     $('#HoldItemsArr').length = 0;
     $("#HoldItemsArr option:selected").prop("selected", false);
     $("#HoldItemsArr").val('')
     $("#HoldItemsArr").multiSelect("clearSelection");
 }

@EricAimeTchatchoua are you checking if the select has the correct id? The 2nd option should have done the trick `$("#HoldItemsArr option:selected").prop("selected", false);` — Khaldoun Nd, Mar 15 '19 at 13:36
@KhaldounNd I checked the id and is fine any other suggestion? — Eric Aime Tchatchoua, Mar 15 '19 at 15:48

score 0 · Answer 1 · answered Mar 21 '19 at 09:50

0

The link below help with what I was looking for

How do I reset a jquery-chosen select option with jQuery?

I needed to add the code below to my JavaScript

$('#HoldItemsArr').val('').trigger('chosen:updated');

answered Mar 21 '19 at 09:50

Eric Aime Tchatchoua

171
1
2
16

Stephen · Answer 2 · 2023-04-01T20:14:50.433

0

Option 1:

$("#HoldItemsArr").multiselect("clearSelection");

Option 2:

$("#HoldItemsArr option:selected").removeAttr("selected");
$("#HoldItemsArr").multiselect('refresh');

edited Apr 01 '23 at 20:14

answered Nov 29 '21 at 23:41

Stephen

115
10

Clear multi select dropdown using JavaScript

2 Answers2