I am trying to create dropdown filters using JavaScript. I would like to add more values to "data-subject" using comma. Could you explain how to attribute multiple values in the JavaScript below? Thanks!
<div class="col-md-3 col-6 property-item" data-grade="prek" data-type="lesson" **data-subject="eng,sci"** >
< script >
$("select.grade, select.type, select.subject").change(update);
function update() {
var resourceGrade = $('select.grade').val();
var resourceType = $('select.type').val();
var resourceSubject = $('select.subject').val();
$('.property-load-section')
.find('.property-item')
.hide()
.filter(function() {
var okResourceGrade = true;
if (resourceGrade !== "all") {
okResourceGrade = $(this).attr('data-grade') === resourceGrade;
}
var okResourceType = true;
if (resourceType !== "all") {
okResourceType = $(this).attr('data-type') === resourceType;
}
var okResourceSubject = true;
if (resourceSubject !== "all") {
okResourceSubject = $(this).attr('data-subject') === resourceSubject;
}
console.log(okResourceSubject);
return okResourceGrade && okResourceType && okResourceSubject;
})
.fadeIn('fast');
}
< /script>
try this
okResourceSubject = $(this).attr('data-subject').split(',').includes(resourceSubject);
split(',') will create an array with all the values separated by a comma