New to Kendo UI for jQuery? Start a free 30-day trial

Value

methods

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>

value

Parameters:valueString

The value to set.

Returns:String

The value of the DropDownList.

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

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

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

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

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

<input id="products" style="width: 100%" />
<script>
  $("#products").kendoDropDownList({
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    autoBind: false,
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/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>