I am using Kendo UI jQuery version 2019.2.514
. I have code snippet
<input id="skuCode" name="skuCode" style="width: 100%;"/>
<input id="productName" name="productName" style="width: 100%;"/>
<script>
$(document).ready(function () {
var data = new kendo.data.DataSource({
transport: {
read: {
url: "/sku_json",
dataType: "json"
}
},
pageSize: 30
});
// create DropDownList from input HTML element
$("#skuCode").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
filter: "contains",
index: 0,
change: onChange
});
});
// Set selected text value of Drop-down list --> value of input productName.
function onChange() {
// document.getElementById("productName").value = document.getElementById("skuCode").value; // Return selected value of drop-down list
// document.getElementById("productName").value = document.getElementById("accountObjectCode").text; // I try something like this, but not work.
}
</script>
Web page has 2 inputs: skuCode
is a drop-down list. productName
is a input textbox. When skuCode
has event onChange
, I want set value of textbox productName
automatically (equal the text label of selected drop-down list, not value of selected drop-down list), but still allow user edit. How to do this?