value

Gets or sets the value of the DropDownList. The value will not be set if there is no item with such value. If value is undefined, text of the data item is used.

• If the widget is not bound (e.g. autoBind is set to false), the value method will pre-fetch the data before continuing with the value setting. This does not apply when MVVM binding is used.
• The widget will clear the applied filter if a new value is set. Thus it ensures that the original/whole data set is available for selection.
• This method does not trigger change event. This could affect MVVM value binding. The model bound to the widget will not be updated. You can overcome this behavior trigerring the change event manually using trigger("change") method.

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [ "Apples", "Oranges" ]
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.value("Apples");
dropdownlist.trigger("change");
</script>

Parameters

value String

The value to set.

Returns

String The value of the DropDownList.

Example - set value of the widget

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [ "Apples", "Oranges" ]
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

dropdownlist.value("Oranges");
</script>

Example - set value of the widget bound to remote data

<input id="products" style="width: 100%" />
<script>
    $("#products").kendoDropDownList({
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                }
           }
        }
    });

    var dropdownlist = $("#products").data("kendoDropDownList");
    dropdownlist.value(2);
</script>

Example - set the value of the widget when autobind is set to false

<input id="products" style="width: 100%" />
<script>
  $("#products").kendoDropDownList({
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    autoBind: false,
    dataSource: {
      transport: {
        read: {
          dataType: "jsonp",
          url: "https://demos.telerik.com/kendo-ui/service/Products",
        }
      }
    }
  });

  /* Log the data length before using the DropDownList value method */
  /* The result can be observed in the DevTools(F12) console of the browser. */

  console.log($("#products").data("kendoDropDownList").dataSource.data())

  $("#products").data("kendoDropDownList").value(2);
  setTimeout(function(){
    /* Log the data after setting the DropDownList value */
    /* The result can be observed in the DevTools(F12) console of the browser. */
    console.log($("#products").data("kendoDropDownList").dataSource.data())
  }, 500)
</script>