CODEWITHSUNDEEP
javascriptjquerykendo-ui
Kelly Flet
Kelly Flet

Reputation: 564

Can't Change Value of Kendo Dropdown with jQuery

I'm creating a drop down select in html and trying to change the value displayed in it with jQuery.

  <form id="my-form">
    <select id="my-select">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </form>

With my Javascript file as 

$(document).ready(function() {
   $("#my-select").kendoDropDownList().data("kendoDropDownList");
   $("#my-select").val("Option 2");
});

Upvotes: 0

Views: 2985

Answers (1)

Kelly Flet
Kelly Flet

Reputation: 564

For some reason, when using the kendoDropdownList, trying to set the value of the select does not work when using plain old jquery's .val() function. Instead, use the kendo-ui API .value() like so:

$(document).ready( function() {
    // create a dropdown with Kendo. notice I set the value returned to a variable
    var my_dropdown = $("#my-select").kendoDropDownList().data("kendoDropDownList");

    // set the kendo dropdown to display a value using kendo api. this works
    my_dropdown.value("Option 2");

    // notice how this does nothing. the value remains 'option 2'
    $("#my-select").val("Option 3");
});

Here is a working example: jsfiddle

Upvotes: 1

Related Questions