Filter users by data-attribute Jquery

Question

I am trying to filter users by its data attribute , I have main div called user-append which contains users that I get from ajax get request , there can be 3 users or 100 users, its dynamical , this is my div with one user for the moment

<div id="user-append">
    <div class="fc-event draggable-user" data-profesion="'+user.profesion+'" id="user_'+user.id+'" style="z-index: 9999;">
        <div class="container-fluid">
            <input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
            <div class="row" style="justify-content: center;">
                <div class="col-xs-3 avatar-col">
                    <div class="innerAvatarUserLeft">
                        <img src="'+getUserImage(user.avatar)+'" width="100%" style="margin: 0 auto;">
                    </div>
                </div>
                <div class="col-xs-9 data-col">
                    <p class="fullName dataText">'+user.fullName+'</p>
                    <p class="usr_Gender dataText">Male</p>
                    <div style="position: relative">
                        <li class="availableUnavailable"></li>
                        <li class="usr_profesion dataText">AVAILABLE</li>
                    </div>
                    <p class="user_id" style="float:right;margin: 3px">'+user.employee_id+'</p>
                </div>
            </div>
        </div>
    </div>
</div>

as you can see I have data-profesion attribute from which I am trying to filter users depend on the profession that they have , I get the ajax request like this

$.ajax({
    url: "/rest/users",
    success: function (users) {
        var options = [];
        $user = $("#append_users");
        $.each(users, function (i, user) {
            options.push({
                'profession': user.prof.Profession,
                'gender': user.prof.Gender
            });
            userArr.push({
                'id': user.id,
                'firstName': user.prof.FirstName,
                'lastName': user.prof.LastName,
                'fullName': user.prof.FirstName + ' ' + user.profile.LastName,
                'email': user.email,
                'avatar': user.prof.Photo,
                'profesion': user.prof.Profession
            });

            $('#filterByProfession').html('');
            $('#filterByGender').html(''); // FIRST CLEAR IT
            $.each(options, function (k, v) {
                if (v.profession !== null) {
                    $('#filterByProfession').append('<option>' + v.profession + '</option>');
                }
                if (v.gender !== null) {
                    $('#filterByGender').append('<option>' + v.gender + '</option>');
                }
            });
        });
    });

and now I am trying to filter the users by its data-profesion , on change of my select option which I populate from the ajax get request , It should show only the users that contain that data-profesion value , something like this

$('#filterByProfession').change(function () {
    var filterVal = $(this).val();
    var userProfVal = $(".fc-event").attr("data-profesion");
    if (filterVal !== userProfVal) {
    }
});

Answer 1

You can use a CSS selector to find those users, and then hide them:

$('#filterByProfession').change(function () {
    // first hide ALL users
    $('.draggable-user').hide()
    // then filter out the ones with the correct profession:
    //    (you need to escape the used quote)
        .filter('[data-profesion="' + $(this).val().replace(/"/g, '\\"') + '"]')
    //  ... and show those
        .show();
});

Answer 2

Try using this

$(".fc-event[data-profesion='" + filterVal + "']").show();
$(".fc-event[data-profesion!='" + filterVal + "']").hide();

Answer 3

You're trying to get the userProfVal throughout a className selector which can return more than one element.

var userProfVal = $(".fc-event").attr("data-profesion");
                     ^

Use the jQuery function .data() to get data attributes.

Look at this code snippet using the .each to loop over all elements returned by this selector .fc-event :

$('#filterByProfession').change(function() {
  var filterVal = $(this).val();
  $(".fc-event").hide().each(function() {
    if ($(this).data("profesion") === filterVal) {
      $(this).show();
    }
  });
});

Example with static data

 $('#filterByProfession').change(function() { var filterVal = $(this).val(); $(".fc-event").hide().each(function() { if ($(this).data("profesion") === filterVal) { $(this).show(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='filterByProfession'> <option>-----</option> <option>Developer</option> <option>Cloud computing</option> </select> <div id="user-append"> <div class="fc-event draggable-user" data-profesion="Developer" id="user_1" style="z-index: 9999;"> <div class="container-fluid"> <input type="hidden" value="1" id="user_1_value" class="userId"> <div class="row" style="justify-content: center;"> <div class="col-xs-3 avatar-col"> <div class="innerAvatarUserLeft"> <img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;"> </div> </div> <div class="col-xs-9 data-col"> Developer <p class="fullName dataText">Ele</p> <p class="usr_Gender dataText">Male</p> <div style="position: relative"> <li class="availableUnavailable"></li> <li class="usr_profesion dataText">AVAILABLE</li> </div> <p class="user_id" style="float:right;margin: 3px">11</p> </div> </div> </div> </div> </div> <div id="user-append"> <div class="fc-event draggable-user" data-profesion="Cloud computing" id="user_2" style="z-index: 9999;"> <div class="container-fluid"> <input type="hidden" value="2" id="user_2_value" class="userId"> <div class="row" style="justify-content: center;"> <div class="col-xs-3 avatar-col"> <div class="innerAvatarUserLeft"> <img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;"> </div> </div> <div class="col-xs-9 data-col"> Cloud computing <p class="fullName dataText">Enri</p> <p class="usr_Gender dataText">Male</p> <div style="position: relative"> <li class="availableUnavailable"></li> <li class="usr_profesion dataText">AVAILABLE</li> </div> <p class="user_id" style="float:right;margin: 3px">11</p> </div> </div> </div> </div> </div>

See? the sections are being hidden according to the selected option.