如何在Jquery sumoselect Multi select插件中重置选择框值

Question

I am using Jquery sumoselect plugin for multiselection option. I want to reset the values on click of some button.

Here is my code:

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="js/jquery.sumoselect.min.js"></script>
<link href="css/sumoselect.css" rel="stylesheet" />

<script type="text/javascript">
    $(document).ready(function () {
        window.asd = $('.SlectBox').SumoSelect({  okCancelInMulti: true });

    });

Here is the function for reset of multiselect content

function clearContents()
    {
         $('select.SlectBox')[0].sumo.unload();
    }

<select name="is_dist_handled"  multiple="multiple" placeholder="Select"  class="SlectBox">
    <option value="Y">Yes</option>
    <option value="N">No</option>
</select>

Answer 1

You can use the sumo.unSelectItem(); . Source here

$(document).ready(function () {
   $('.SlectBox').SumoSelect({  okCancelInMulti: true });

   $('button').on('click', function(){
     var num = $('option').length;
     for(var i=0; i<num; i++){
       $('.SlectBox')[0].sumo.unSelectItem(i);
     }
   });

});

Fiddle

Update

To remove only the selected options

$('button').on('click', function () {
    var obj = [];
    $('option:selected').each(function () {
        obj.push($(this).index());
    });

    for (var i = 0; i < obj.length; i++) {
        $('.SlectBox')[0].sumo.unSelectItem(obj[i]);
    }
});

Fiddle

Answer 2

This would be the possible option to unSelect all the selection:

.unSelectAll()

Un selects all items in the list

//Un select all items

$('select.SlectBox')[0].sumo.unSelectAll();

Answer 3

This is working fine for me.

('#Multi_Lead_Status')[0].sumo.unload();
$('#Multi_Lead_Status').val('');
$('#Multi_Lead_Status').SumoSelect({
   search: true,
   placeholder: 'Status',
   csvDispCount: 2,
   searchText: 'Search...'
});