Кендо UI (Множественная) - OnClick показать выбранные значения и очистить значения

Question

Я использую Кендо UI - MultiSelect Dropdown для переключателя Replace ...

OnClick по ссылке, как я могу показать выбранных значения? После того, как я показываю, я должен очистить значения в KendoSelect по умолчанию заполнитель (--- 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

Надеюсь, это то, что вы ищете:

Select Dropdown Values and then reset afterwards

Я подправили свой JavaScript для вас немного :

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

    selVals.value(null); 

    }); 

тогда я просто переношу значения в блок кода для вас. Но вы можете показать им, как вы хотите.

Answer 2

Не используйте селектор Jquery по классу: $(".mySelectBox").data("kendoMultiSelect"), потому что кендо применять этот класс также <div>, что обертывают <select>. Используйте id атрибут вместо:

<select id="mySelectBox"... 

и JavaScript:

$(document).ready(function() { 
    $("#mySelectBox").kendoMultiSelect({ 
    placeholder: "--- Select ---", 
    }); 
    $("#showSelectedValues").click(function(){ 
    var multiselect = $("#mySelectBox").data("kendoMultiSelect"); 
    $("h5 span").html(multiselect.value().join()); 
    multiselect.value([]); 
    }); 
});