JavaScript dropdown menu filter: Can I add multiple values in the "data-" attribute?

Viewed 67

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>
1 Answers

try this

okResourceSubject = $(this).attr('data-subject').split(',').includes(resourceSubject);

split(',') will create an array with all the values ​​separated by a comma

Related