DropDownList - change optionLabel dynamically

HTML

<script src="http://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<input id="ddl" />
<button id="optionLabel">Load data</button>

<br/>

JavaScript

$("#ddl").kendoDropDownList({
    dataTextField: "display",
    dataValueField: "id"
});

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

$("#optionLabel").click(function() {
    ddl.setDataSource(new kendo.data.DataSource({ data: [
        { display: "GB5", id: 1 },
        { display: "GB4", id: 2 },
        { display: "GB6", id: 3 },
        { display: "GB7", id: 4 }
    ] }));
    ddl.setOptions({ optionLabel: "Select item" });
    ddl.refresh();
    ddl.select(0);
});
/////------------------------