ejs-chiplist selected value pass in OnChage Event

Question

I am using syncfusion for displaying the list of subjects.

<ejs-chiplist id="chip-SubjectTags" selection="Single" click="FilterSubject" cssClass="e-primary">
<e-chips>
@foreach (var mySubject in (List<FilterSubjectInfo>)ViewBag.FilterTags)
{
<e-chip text="@mySubject.Name" value="@mySubject.SubjectTagID" enabled="true"></e-chip>
}
</e-chips>
</ejs-chiplist>

When selecting the subject let's say MATHS OR SCIENCE it calls the function FilterSubject(e) and fetch the data.

Now I have one dropdown list in which I have a list of Teacher's names.

<select class="form-control" id="selectTeacher" onchange="getTeacherVideo(this)">
</select>

function getTeacherVideo(selectObject) {
var value = selectObject.value;
//var abcValue = document.getElementById('chip-SubjectTags').selectObject;
//console.log(abcValue);
console.log(value);
}

Here in getTeacherVideo() function I want to use the chip-SubjectTags, selected chip value.

How can I access chip-SubjectTags chip value in Javascript.

Answer 1

You can achieve your requirement by using the getSelectedChips method of Chip component as demonstrated in the below code snippet,

<ejs-chiplist id="chip-avatar" click="FilterSubject" selection="Single" enableDelete="true">
<e-chips>
    . . .
</e-chips>

<select name="cars" id="cars" onchange="getTeacherVideo(this)">
<script>
function getTeacherVideo(selectObject) {
    var chip = document.getElementsByClassName('e-chip-list')[0].ej2_instances[0];//Chip instance.
    var selected = chip.getSelectedChips(); //to get the value of the selected chip
    console.log(selected);
}

API Reference: https://ej2.syncfusion.com/javascript/documentation/api/chips/chipList/#getselectedchips