Select a ComboBox Value from Jquery

[Thomas]

Hi,

I have a little issue, i'm explaining :

I'm working with Kendo and Google Map API and some data are retrieve from the API, like address, postal code, city, country, etc...
I would like to populate different ComboBoxes (Address combobox, Postal Code combobox, etc...)

The problem is that i don't know how to retrieve the selected value from a combobox, any idea please ?

Here is my code :

On Controller (which populate countries combobox) :

public JsonResult GetCascadeCountries()
{
   return Json(_db.Countries.Select(c => new {CountryId = c.Id, CountryName = c.CountryName }), JsonRequestBehavior.AllowGet);
}

Index.cshtml : 

 @(Html.Kendo().ComboBox()
           .Name("Countries")
           .Placeholder("Select a country")
           .DataTextField("CountryName")
           .DataValueField("CountryId")
           .DataSource(source => {
           	source.Read(read => {
                    read.Action("GetCascadeCountries", "Index");
                });
           })
   )

In the javascript file :

if (elt.types[0] == 'country')
    {
        var countriesComboBox = $('#Countries').data("kendoComboBox");
        alert($('#Countries_input').data());
        var selectItem = function (dataItem) {
            //dataItem argument is a ComboBox data item.
            return dataItem.Text == elt.long_name;
        }
 
        countriesComboBox.select(selectItem);
    }

I tried with a document.getElementsByName ou document.getElementById, to set the value, but i still fail :/

Any idea ?

Thanks

Edit : I've found, you have to set the trigger manually : countriesComboBox.trigger("change");

[Petur Subev]

Hello Thomas,

Your approach to select value looks correct. Check this JSBin it selects the second item properly. 
To get the actual value you should use the value method.

Kind Regards,
Petur Subev
the Telerik team