如何检查是否选择了Kendo UI Multiselect中的特定值?

时间:2014-05-19 16:59:31

标签: javascript html kendo-ui kendo-multiselect

HTML:

<select id="days" multiple="multiple" data-placeholder="Select days...">
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>          
    <option value="Friday">Friday</option>          
    <option value="Saturday">Saturday</option>          
    <option value="Sunday">Sunday</option>          
</select>

使用Javascript:

$("#days").kendoMultiSelect({
    autoClose: false
});

var days = $("#days").data("kendoMultiSelect");

如何确定是否选择了特定项目?例如,我怎么知道用户是否选择了星期五?

请注意,我可以在这里选择多个项目。

3 个答案:

答案 0 :(得分:2)

没有API方法来检查是否选择了特定项目,但您可以轻松创建一个,例如像这样:

kendo.ui.MultiSelect.fn.isSelected = function (key) {
    var selectedItems = this.value();
    return selectedItems.indexOf(key) > -1;
};      

然后您可以像这样使用:

$("#days").kendoMultiSelect({
    autoClose: false
});

var days = $("#days").data("kendoMultiSelect");

$("#button").click(function() {
    console.log("is it friday?", days.isSelected("Friday"));
});

答案 1 :(得分:1)

查看dataItems()函数:

http://docs.telerik.com/kendo-ui/api/web/multiselect#methods-dataItems

然后你可以像这样迭代选定的项目:

days.dataItems().forEach(function(element, index, array) {    
    //dataItems() returns the selected items
    // Work on each element, element.value
  });

这是一个jsbin:

http://jsbin.com/vijiq/1/edit?html,js,output

答案 2 :(得分:0)

您可以尝试switch

var day = document.getElementById("days").value;
switch(day) {
    case "Monday":
        yourFunction();
        break;
    case "Tuesday":
        anotherFunction();
        break;

    ... etc.
}

好吧,试试这样的话吗?没关注,请注意。

var days = [];
var options = document.querySelectorAll("#days option");
var i = 0, length = options.length;
for (i; i < length; i++) {
    if (options[i].selected) {
        days.push(options[i].value);
    }
}
alert(days);