选择kendoComboBox

时间:2016-05-30 08:59:27

标签: jquery kendo-ui kendo-combobox

我有一个表单,我让用户使用geonames API和kendoComboBox选择一个位置。但是,如果用户选择(单击)列表中的第一个项目,则实际上并未选择该项目。只有当他们选择任何其他项目然后再次选择第一项时,选择才真正起作用 选择任何其他项目,但第一项工作正常。

有人能指出为什么会出现这种情况以及如何解决这个问题? 这是我的代码:

<tr>
    <td><label>Location:</label></td>
    <td><input id="toBeSetByJS" class="locationDisplay" readonly></td>
    <td><label>Select Location:</label></td>
    <td><input class="locationSelector" id="toBeSetByJS2" type="text">{{ form.location }}</td>
</tr>

<script>              
$( ".locationSelector").each(function( index ) {

// name of hidden input element
var locationInput = $(this).next("input").attr("id");

// set names of selector and display
var locationDisplay = locationInput + "-display";
$(this).parent().prev().prev().children().attr("id", locationDisplay);                                

var locationSelector = locationInput + "-selector";
$(this).attr("id", locationSelector);       

// initialize the location display if necessary
var locationid = $("#" + locationInput).val();

if (locationid != "") {
    getLocationName(locationid, locationDisplay);
}     

var isocode = $("#isocode").val();       

$(this).kendoComboBox({
    placeholder: "Select location...",
    dataTextField: "name",
    dataValueField: "geonameId",
    template: '<b>${ data.name }</b>, ${ data.adminName1 }, ${ data.countryName } (${data.fcode})',
    filter: "startswith",
    dataSource: {
        serverFiltering: true,
        transport: {
            read: {
                url: "http://api.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    countryBias: isocode,
                    username: "my.username",
                    name_startsWith: function() {
                        return $("#" + locationSelector).data("kendoComboBox").text();                          
                    }
                }
            }
        },
        schema: {
            data: "geonames"   
        }
    },
    change: function() {
        $("#" + locationDisplay).val(this.text());
        $("#" + locationInput).val(this.value());

    }
});
});


function getLocationName(geoid, locationDisplayField) {

$.ajax({
    url: "http://api.geonames.org/getJSON",
    dataType: 'jsonp',
    data: {
        geonameId: geoid,
        style: "full",
        username: "my.username"
    },
    success: function(data) {
        //var locName = (data.name +  ", " + data.adminName1 + ", " + data.countryName);
        $("#" + locationDisplayField).val(data.name);

    },
    error: function (xhr, textStatus) {
        alert('Ooops, geonames server returned: ' + textStatus);
    }
});


}

</script>

1 个答案:

答案 0 :(得分:0)

要使用JQuery设置kendo组合框的默认值,您可以这样做 -

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

看看这是否有帮助。