You can clear the selected item in the below two different ways.
By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in
DropDownList through interaction. By using showClearButton
property, you can enable the clear icon in DropDownList element.
Through programmatic you can set null value to anyone of the index, text or value property to clear the selected item in DropDownList.
The following example demonstrate about how to clear the selected item in DropDownList.
var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
// initialize DropDownList component
var dropDownListObject = new ej.dropdowns.DropDownList({
//set the data to dataSource property
dataSource: sportsData,
// set placeholder to DropDownList input element
placeholder: "Select a game",
//enable the clear icon
showClearButton: true
});
// render initialized DropDownList
dropDownListObject.appendTo('#ddlelement');
// Set null value to value property for clear the selected item
document.getElementById('btn').onclick = () => {
dropDownListObject.value = null;
};<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DropDownList</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin:0 auto; width:250px;">
<br>
<input type="text" id="ddlelement">
</div>
<div style="padding: 50px">
<button id="btn" class="e-control e-btn"> Set null to value property</button>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>