Kendo UI 下拉列表未显示正确的值

Question

我遇到过这样的情况，我的下拉列表应该根据我的 userPropertyID=3 显示 GUEST HOUSE，但不知何故它仍然没有在下拉列表中显示正确的值。需要您的帮助，感谢您的宝贵时间。

  var userPropertyID = 3;

  var propertyTBL = [
  {"propertyID":"1","propertyName":"HOTEL"},
  {"propertyID":"2","propertyName":"RESORT"},
  {"propertyID":"3","propertyName":"GUEST HOUSE"},
  {"propertyID":"4","propertyName":"HOME"},
  {"propertyID":"5","propertyName":"MOTEL"}];

  
  var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL
  });
  dropdownlist.select(userPropertyID);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    <style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>

</body>
</html>

Answer 1

发生这种情况是因为您没有将正确的 kendo 小部件分配给变量。所以它不知道kendo的函数。

正确的方法是这样（通过使用 .data('kendoDropDownList')）

var dropdownlist = $("#dropdownlist").data('kendoDropDownList');

所以在你的情况下，你需要将你的代码部分更改为这个。

var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL
}).data('kendoDropDownList');

但请记住，索引从 0 开始（我在您的代码中看到，在索引 3 处，您再次拥有与索引 0 处一样的 HOME 值，所以不要对此感到困惑）。

现在调用 .value() 函数就可以了

dropdownlist.select(userPropertyID - 1);

最后，如果您在创建小部件后立即设置值，即使在您的实际应用程序中，您也可以使用 value 属性来设置它

var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL,
    value: userPropertyID
}).data('kendoDropDownList');

编辑：为了使其完整，这里是您修改后的代码片段

  var userPropertyID = 3;

  var propertyTBL = [
  {"propertyID":"1","propertyName":"HOTEL"},
  {"propertyID":"2","propertyName":"RESORT"},
  {"propertyID":"3","propertyName":"GUEST HOUSE"},
  {"propertyID":"4","propertyName":"HOME"},
  {"propertyID":"5","propertyName":"MOTEL"}];

  
  var dropdownlist = $("#dropdownlist").kendoDropDownList({
    dataTextField: "propertyName",
    dataValueField: "propertyID",
    dataSource: propertyTBL
  }).data('kendoDropDownList');
  dropdownlist.select(userPropertyID - 1);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    <style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>

</body>
</html>

Kendo UI 下拉列表未显示正确的值

Kendo UI Dropdownlist not display correct value

kendo-ui

kendo-grid

kendo-dropdown

kendo-datasource