Kendo UI (multiSelect) - OnClick 显示选定的值并清除这些值答案

【问题标题】：Kendo UI (multiSelect) - OnClick show selected values and clear the valuesKendo UI (multiSelect) - OnClick 显示选定的值并清除这些值
【发布时间】：2016-01-04 15:23:12
【问题描述】：

我正在使用 Kendo UI - MultiSelect Dropdown 进行选择框替换...

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);
  });

});

【问题讨论】：

标签： jquery kendo-ui dojo kendo-multiselect

【解决方案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);

  });

那么我只是为您将值包装在代码块中。但是您可以向他们展示您想要的方式。

【讨论】：

@David Shorthose..谢谢..按预期工作...继续努力

【解决方案2】：

不要按类使用 jquery 选择器：$(".mySelectBox").data("kendoMultiSelect")，因为 kendo 将该类也应用于包装 <select> 的 <div>。请改用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([]);
  });
});

【讨论】：

@Gene R...感谢您的提示