更改边框颜色时，Kendo UI Dropdownlist 丢失数据答案

【问题标题】：KendoUI Dropdownlist loses data when changing border color更改边框颜色时，Kendo UI Dropdownlist 丢失数据
【发布时间】：2018-03-26 17:02:28
【问题描述】：

在单击按钮时更改剑道下拉列表的输入边框颜色时遇到了问题。当我单击按钮时，输入边框会变红，这是应该的，但下拉列表中缺少所有数据。

知道为什么我在单击按钮时会丢失下拉菜单的数据吗？

$(document).ready(function() {

  $('#btn').on('click', function() {
    var dd = $('#myColor').kendoDropDownList().data("kendoDropDownList");
    dd.wrapper.find(".k-input").css("border", "2px solid red");

  });

  var data = [{
      text: "Select ",
      value: "0"
    },
    {
      text: "Black",
      value: "1"
    },
    {
      text: "Orange",
      value: "2"
    },
    {
      text: "Grey",
      value: "3"
    }
  ];

  // create DropDownList from input HTML element
  $("#myColor").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="form-group">
  <label for="myColor" class="control-label col-lg-2 col-sm-4">Color</label>
  <div class="col-lg-10 col-sm-8">
    <input id="myColor" class="form-control" placeholder="Color" name="myColor" style="max-width:75%;" />
  </div>
</div>

<div class="form-group">
  <button id='btn' class='btn btn-success'> Click </button>
</div>

【问题讨论】：

标签： jquery css kendo-ui kendo-dropdown

【解决方案1】：

这是一个很容易解决的问题。

当您在按钮单击中调用下拉列表时，您正在重置控件，因此它没有您在重置之前应用的数据源等。只需将调用行更改为：

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

从此：

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

我提供了一个道场供您查看它的工作情况。 http://dojo.telerik.com/usehOGiS

【讨论】：