如何获取Kendo多选下拉框的已选值？

Question

我正在使用Kendo多选框，如下所示，但我无法获取所选值

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var itm in items)
{
   selectedData.push(itm);
}

但是，数组selectedData返回的是多选框中项目的索引而不是值。

- Omar Seleim

---

@PierreLebon 给它点赞！ - redwards510

@redwards510，他们值得吗？ - Drag and Drop

@PierreLebon，实际上，我将在接下来的一秒钟内发布一个建立在其他答案基础之上的答案，你应该投票支持那个答案 ;) - redwards510

@PierreLebon其实你不必一定点赞，你只需在最有帮助的问题旁边点击复选框即可。这样也会给你带来积分，所以你应该这么做！ - redwards510

@redwards510，“你只需单击问题旁边的复选框”：我不是OP。 OP带着一段可用的代码来到这里，寻找他不理解的错误。 OP在10分钟内得到了答案，然后否认了它。现在OP已经离开了。没有绿色勾选框可以赢得任何人。这应该被关闭为“不是问题”。但是我认为，你的答案很好，因为你在最后添加了检查列表。答案有一定的质量，所以我不会投票关闭它。但是，这个破碎的复制粘贴问题开始让我感到困扰。 - Drag and Drop

Answer 1

使用这个函数可以返回索引。

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var i=0;i<items.length;i++)
{
   selectedData.push(items[i]);
}

- volvox

---

我想返回选定的值而不是索引。 - Omar Seleim

你试过这个吗？ - volvox

Answer 2

您可以直接将从value()方法返回的数组分配给变量，例如：

var ms = $("#multiselect").kendoMultiSelect({
  value: ["1", "2"]
}).data('kendoMultiSelect');

var selectedItems = ms.value();
console.log(selectedItems); // ["1", "2"]

- topalkata

Answer 3

var selected = $("#multi").data("kendoMultiSelect").value();

- R.Akhlaghi

---

虽然这段代码可能回答了问题，但提供关于它如何以及为什么解决问题的额外上下文会提高答案的长期价值。 - Tomer Shetah

Answer 4

您的原始代码看起来没有问题。您确定只获取了索引吗？也许您应该发布您的MultiSelect代码。我发现这个问题是因为我遇到了同样的问题，并使用其他答案作为参考，但我发现它们过于复杂。所以让我用另一种复杂的方式回答：）

以下是我的解决方案。我知道这比您需要的代码多，但我认为在这里看到整个情况很重要。首先让我设置一下。如果您使用Kendo（）。MultiSelect.Name（“SomeName”）属性超过一次，则存在问题。 “名称”不仅设置html名称，还设置id，您永远不希望两个具有相同标识符的id。因此，在我的代码中，我将唯一的Id附加到我的MultiSelect.Name属性中，以确保唯一的id。我将MultiSelect放在人员表的每一行中。我展示这个是为了确保您使用DataValueField属性，以便能够获得所选值（而不是ui中看到的文本）。如果您只显示没有背后的ID的文本值列表，那么可能这就是为什么您获取错误数据的原因？

@foreach (var cm in Model.CaseMembers)
{
<tr>
<td>
    @(Html.Kendo().MultiSelect()
      .Name("IsDelegateFor" + cm.CaseMemberId)                              
      .Placeholder("is a delegate for..")
      .DataTextField("FullName")
      .DataValueField("CaseMemberId")
      .BindTo(Model.Attorneys)
    )
</td>
</tr>
}

然后，在我的jQuery中，我尝试提取DataValueField（CaseMemberId），它是MultiSelect的选定值数组...

var sRows = [];
$('#cmGrid tr').each(function () {
    // 'this' is a tr
    $tr = $(this);
    // create an object that will hold my array of selected values (and other stuff)
    var rec = {};   
    rec.IsADelegateFor = [];        
    // loop over all tds in current row
    $('td', $tr).each(function (colIndex, col) {
        if (colIndex === 3) {
            // make sure our MultiSelect exists in this td
            if ($(this).find("#IsDelegateFor" + rec.CaseMemberId).length) {                        
                // it exists, so grab the array of selected ids and assign to our record array
                rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();                        
            }
        }
    }
    // add this tr to the collection
    sRows.push(rec);
}

所以这只是一种非常冗长的方式来说明这一行代码，就像其他人提到的那样，完美地抓取了id。没有必要迭代.value()数组并将内容推送到另一个数组中！

rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();  

因此，在您的原始代码中，以下代码没有理由不起作用，

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData = [];
selectedData = multiselect.value();
console.log(selectedData);

除非

• 您在C＃中没有正确设置DataValueField的MultiSelect
• 页面上有多个具有完全相同ID的MultiSelect，并且它正在读取与您想要的不同的一个。
• 您甚至没有值字段，只有一系列文本。

- redwards510

Answer 5

Volvox提供的解决方案可行。

以下是jQuery版本，

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
$.each(items ,function(i,v){
  selectedData.push(v);
});

- Dashang G. Makwana

---

我认为你已经有了变量items的值，即multiselect.value(); 忽略其他行。 - hmota

Answer 6

如果您想同时获取所选文本和值：

    $("#SelectRoles").width(300).kendoMultiSelect({
     dataSource: {
        transport: {
            read: pg + "Controller/Roles"
          }
        },
     dataTextField: "Label",
     dataValueField: "Code"
    });
    
    var multiselect = $("#SelectRoles").getKendoMultiSelect();
    var selectedData = [];
    var items = multiselect.dataItems();
    for (var itm in items) {
        selectedData.push(itm.Label, itm.Code);
    }

- Viktor