无法设置KendoUI DropDownList选中索引问题求助

嘿，我太懂这种明明觉得代码没问题但就是不生效的抓狂感了！你的问题其实很典型——你调用select()方法的对象错了。

问题根源 #

你初始化DropDownList后，var dropdownlist = $('#comboBox').kendoDropDownList(...)这句返回的是jQuery DOM对象，而不是Kendo DropDownList的组件实例。直接在jQuery对象上调用select()自然不会起作用。

修复方案 #

你需要先获取到Kendo组件的实例，再调用select()方法，有两种简单的方式：

方式1：初始化时直接获取实例

在初始化代码后面链式调用.data("kendoDropDownList")，就能拿到组件实例：

<body>
  <script type='text/javascript'>
    $(document).ready(function () {
      var data = [{ text: "Tutti", value: 1 }, { text: "Modifiche Anagrafiche", value: 2 }, { text: "Rinnovi", value: 3 }, { text: "Consuntivi", value: 4 }, ];
      // 链式获取组件实例
      var dropdownlist = $('#comboBox').kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: data
      }).data("kendoDropDownList");
      // 现在调用select就生效了
      dropdownlist.select(2);
    });
  </script>
</body>

方式2：事后单独获取实例

如果已经初始化了组件，也可以单独获取实例再操作：

// 获取实例
var dropdownlist = $('#comboBox').data("kendoDropDownList");
// 设置选中索引
dropdownlist.select(2);

额外小技巧 #

如果你想根据value值而不是索引选中项，用value()方法会更直观，比如要选中"Rinnovi"（value=3），可以直接写：

dropdownlist.value(3);

内容的提问来源于stack exchange，提问作者advapi