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

时间:2016-01-04 15:23:12

标签: jquery kendo-ui dojo kendo-multiselect

我正在使用Kendo UI - MultiSelect Dropdown for selectbox replace ...

点击链接,如何显示所选值?展示后,我必须将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);
  });

});

2 个答案:

答案 0 :(得分:3)

不要按类使用jquery选择器:$(".mySelectBox").data("kendoMultiSelect"),因为kendo也将该类应用于包裹<div>的{​​{1}}。 请改用<select>属性:

id

和javascript:

<select id="mySelectBox"...

答案 1 :(得分:3)

希望这就是你要找的东西:

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

  });

然后我只是将值包装在代码块中。但是你可以告诉他们你想要的样子。