在Kendo DropDownList中按值设置所选选项

时间:2015-04-09 14:23:59

标签: angularjs kendo-ui kendo-dropdown

我的html中有一个带有angularjs的kendo ui下拉列表:

<select kendo-drop-down-list="dropdownlistCatalogs" k-options="optionsDropDownListCatalogs" data-role="dropdownlist" style="display: none;">
   <option value="2" selected="selected">Test1</option>
   <option value="3">Test2</option>
   <option value="4">Test3</option>
</select>

在angularjs控制器中,每当我点击下拉列表中的某个项目时,我都会调用此函数从下拉控件中删除所选项目:

function removeItemFromDropDown(e) {
   var index = e.item.index();
   var selectedItem = $scope.dropdownlistCatalogs.dataItem(e.item.index());
   $scope.optionsDropDownListCatalogs.dataSource.remove(selectedItem);
}

现在,我想将所选选项设置为非现有项目以显示空值。

我尝试过:

$scope.dropdownlistCatalogs.value(-1);

但没有工作

如何按值()设置下拉列表?

1 个答案:

答案 0 :(得分:2)

我对angularjs不太了解,如果情况有所不同。我看到$scope在那里,我猜是有角度的,因为我没有看到它在任何地方定义。但是,如果使用jquery

,通常value会帮助您解决这个问题

使用id:-1在顶部添加默认空白值,并将默认值设置为1。

单击按钮,您可以将值更改为-1

看起来像这样:

var data = [
    { "text": "" , id: -1 }, 
    { "text": "aaa",id: 1 },
    { "text": "bbb",id: 2 },
    { "text": "ccc", id:3}
];

$("#ddl").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "id",
    dataSource: data,
    index: 3
});

$("#button").on("click", function ()  {

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

    dropdownlist.value(-1);
});

Here is an working example