Kendo UI (multiSelect) - OnClick show selected values and clear the values

Question

I am using Kendo UI - MultiSelect Dropdown for selectbox replace...

OnClick of link, how can I show selected values? Once I show it, I have to clear the values in KendoSelect to default placeholder (--- Select ---)....

Online Demo

HTML

<select class="mySelectBox" data-placeholder="--- Select ---" multiple="multiple">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

<div><a href="#" id="showSelectedValues">Show Selected Values</a></div>

<h5>Values are: <span></span></h5>

jQuery

$(document).ready(function() {
  $(".mySelectBox").kendoMultiSelect({
    placeholder: "--- Select ---",
  });

  $("#showSelectedValues").click(function(){
    var selVals = $(".mySelectBox").data("kendoMultiSelect").value([]);
    $("h5 span").html(selVals);
  });

});

Answer 1

Hopefully this is what you are looking for:

Select Dropdown Values and then reset afterwards

I have tweaked your javascript for you slightly to:

 $("#showSelectedValues").click(function(){
    var selVals = $("select.mySelectBox").data("kendoMultiSelect");
    $("h5 span").html('<code>' + selVals.value($("#value").val()) + '</code>');

    selVals.value(null);

  });

then I am simply wrapping the values in a code block for you. But you can show them how you want.