Kendo UI ComboBox 选择 Option based on Datasource答案

【问题标题】：KendoUI ComboBox selecting Option based on DatasourceKendo UI ComboBox 选择 Option based on Datasource
【发布时间】：2015-06-03 20:24:23
【问题描述】：

我需要有关此代码的帮助。

代码将从 PHP 脚本获取 JSON 响应，并根据其内容创建 ComboBox。

这行得通...我的问题是我需要定义默认选择的选项，在这种情况下，因为表单是编辑表单。

Javascript：

    dsource = new kendo.data.DataSource({
        transport: {
            read: {
                url: url,
                dataType: "json"
            }
        },
        schema: {
            model: {
                fields: {
                    value: {type: "number"},
                    text: {type: "string"}
                }
            }
        }
    });

    var combobox = $(obj).kendoComboBox({
        placeholder: "Selecione",
        dataTextField: "text",
        dataValueField: "value",
        filter: "contains",
        minLength: 3,
        dataSource: dsource
    });

从 PHP 返回的 json 如下所示：

[{"value":3,"text":"Blue"},{"value":4,"text":"Red"},{"value":5,"text":"Pink"}]

我需要它做的是根据这个 JSON 选择一个选项，比如：

[{"value":3,"text":"Blue", "selected":true},{"value":4,"text":"Red"},{"value":5,"text":"Pink"}]

在这种情况下，默认情况下会选择蓝色选项。

我想尽办法都试过了……

【问题讨论】：

标签： javascript ajax combobox kendo-ui

【解决方案1】：

你也可以试试这个..

//[{"value":3,"text":"Blue", "selected":true},{"value":4,"text":"Red"},{"value":5,"text":"Pink"}]

function getSelectedTagValue() {
    var i = null;
    for (i = 0; dsource.length > i; i += 1) {
        if (dsource[i].selected == 'true') {
            return dsource[i].text;
        }
    }
    return null;
};

$("#kendoitems").kendoComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: data
});

var combobox = $(obj).kendoComboBox({
        placeholder: "Selecione",
        dataTextField: "text",
        dataValueField: "value",
        filter: "contains",
        minLength: 3,
        dataSource: dsource
    });

combobox.value(getSelectedTagValue());

希望对你有帮助，

问候，

【讨论】：

感谢您的帮助，但您的代码无法正常工作。 getSelectedTagValue() 返回一个空值。另外，为什么块 $("#kendoitems").kendoComboBox( 在那里？非常感谢您的回答和时间！我会努力完成这项工作，我会在这里发布。

【解决方案2】：

嗯....在尝试了所有可能的方法之后，我不得不改变我的代码的整个逻辑。

首先我使用 ajax 从 php 获取 ComboBox json 数据。完成后，我将表单输入转换为 KendoUi ComboBox。

好吧，让代码自己说话，这有效：

    $.ajax({
        url: url,
        dataType: "json",
        type: "GET"
    }).done(function (data) {  //Replace SUCCESS

        console.log(obj);

        selected = null;

        $.each(data, function (key, value) {
            console.log(key + ": " + value.text);
            if( value.selected === "selected" ){
                window.selected = key;
            }               
        });

        var dataSource = new kendo.data.DataSource({
            data: data
        });           

        var combobox = $(obj).kendoComboBox({
            placeholder: "Select",
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            index: selected
        });

    }).fail(function (data) {  //Replace ERROr

        console.log('Error', data);

    });

【讨论】：