单击图像时显示剑道下拉列表弹出窗口答案

【问题标题】：Display kendo dropdownlist popup when clicking on image单击图像时显示剑道下拉列表弹出窗口
【发布时间】：2016-12-31 09:16:13
【问题描述】：

是否可以单击图标/图像，然后在图标/图像下方显示剑道下拉列表？

（换句话说，我只想使用下拉列表的弹出窗口，我希望隐藏输入编辑器并将其替换为图像，当用户单击图像时，弹出下拉列表应该出现）

我最接近的解决方案是隐藏输入元素

<div style="display:none;"> <input id="dropdownlist"/> </div>

当点击图像/图标时，我会打开剑道下拉列表弹出窗口

$("#dropdownlist").data("kendoDropDownList").open();

这个问题是弹出菜单显示在左上角，我还没有找到让弹出菜单出现在图标/图像下方的方法。

【问题讨论】：

你用的是哪个版本的剑道？

标签： kendo-ui

【解决方案1】：

这里有一小段代码可能适合您的需求：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>

  <div style="position: absolute; visibility: hidden;">
    <input id="dropdownlist" style="height: 100px;" />
  </div>

  <img src="https://cdn2.scratch.mit.edu/get_image/gallery/1778374_200x130.png" style="height: 100px; position: absolute;" onclick="$('#dropdownlist').data('kendoDropDownList').open()" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  index: 1
});
</script>
</body>
</html>

注意图片高度和下拉菜单高度应该一致。

【讨论】：