默认选择kendo组合框(Default select kendo combobox)

默认选择kendo组合框(Default select kendo combobox)

我使用KendoUI ComboBox，我想放置一个默认选择项目。

在KendoUI组合框中，我没有找到将文本中的默认值和索引放在一起的方法。

<script> $("#combobox").kendoComboBox({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id" }); var combobox = $("#combobox").data("kendoComboBox"); combobox.select(combobox.ul.children().eq(0)); </script>

这里是例子。 如何将其转换为放置文本？

I use KendoUI ComboBox and I want to put a default select item.

In KendoUI ComboBox I didn't find the way to put the default value in text and not with index.

<script> $("#combobox").kendoComboBox({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id" }); var combobox = $("#combobox").data("kendoComboBox"); combobox.select(combobox.ul.children().eq(0)); </script>

Here is the example. How can convert it to put text?

最满意答案

正如@SatyaRanjanSahoo所说你应该使用value 但你应该使用id值，否则你将强制一个可能不在DataSource中的值。

例如，如果你这样做：

var combobox = $("#combobox").data("kendoComboBox"); // Set Value combobox.value("Apricot"); // Get Value alert("Value is " + combobox.value());

这将显示Apricot但这不在DataSource ，如果你这样做：

var combobox = $("#combobox").data("kendoComboBox"); // Set Value combobox.value(2); // Get Value alert("Value is " + combobox.value());

这将显示Oranges ，这是id为2的项目的正确值。

因此，除非您确定value call中设置的value是有效的dataTextField我会推荐使用dataValueField 。

在下面的代码片段中检查这个...

$("#combobox").kendoComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var combobox = $("#combobox").data("kendoComboBox");


// Set a valid value
combobox.value("Oranges");
alert("Value for Oranges is: " + combobox.value());

// Set an invalid value
combobox.value("Apricots");
alert("Value for Apricots is: " + combobox.value()); 
  
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<input id="combobox"/> 
  
 
As @SatyaRanjanSahoo says you should use value but you should use the id value otherwise you will be forcing a value that might not be in the DataSource.
 
Example, If you do:
 
var combobox = $("#combobox").data("kendoComboBox");
// Set Value
combobox.value("Apricot");
// Get Value
alert("Value is " + combobox.value());
 
this will show Apricot but this is not in the DataSource meanwhile, if you do:
 
var combobox = $("#combobox").data("kendoComboBox");
// Set Value
combobox.value(2);
// Get Value
alert("Value is " + combobox.value());
 
This will show Oranges that is the correct value for the item which id is 2.
 
So, unless you are sure that the value set in value call is a valid dataTextField I would recommend using the dataValueField.
 
Check this in the following code snippet...
 
 
 
  
  
$("#combobox").kendoComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var combobox = $("#combobox").data("kendoComboBox");


// Set a valid value
combobox.value("Oranges");
alert("Value for Oranges is: " + combobox.value());

// Set an invalid value
combobox.value("Apricots");
alert("Value for Apricots is: " + combobox.value()); 
  
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<input id="combobox"/>