Question

0

77

Views

Every selectedTest exists in the data-Test array and get results

HTML

<div class="col-test" data-test="Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer">

User selected multiple option from dropdown and get values

var test = $('#options').val();
console.log(test); // Array [ "Swimming pools", "Fitness center" ]

Here's the psudo code

for each selectedTest data (from multiselect input)
  check if it exists in the data-test array
    if it does not exists:
              then show = false
    otherwise:
              do nothing and continue to check the next selectedTest (no code is needed here)

There's issue with below code. I need to make sure that every selectedTest exists in the data-Test array. It doesn't return resulted as expected. There's something issue with code.

data-test="Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer"

var $variable = $('.col-test');
   if(test && test != null && test.length > 0) {
                console.log($varible.data('test'));
                var arryTest = $varible.data('test').split("|");
                arryTest.forEach((singleTest) => { 
                  if(!test.includes(singleTest)){
                    show = false;
                  }else{
                     //do nothing and continue to check the next selected Amenity
                  }
                });
              }

I can see in console is printing data-test results over and over again. I think Loop is not working.

Results

Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer

Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer|Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer

Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer|Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer|Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer

5 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-31T05:47:11.318Z

Consider the following example.

$(function() {
  var dataTest = $("#col-test").val().split("|");
  console.log(dataTest);
  $("#user-options").append("<option>Item 1</option>");
  $.each(dataTest, function() {
    $("#user-options").append("<option>" + this + "</option>");
  });
  $("#user-options").append("<option>Last Item</option>");
  $("#user-options").change(function() {
    var show = true;
    var options = $(this).val();
    console.log("Selected Options", options);
    $.each(options, function(i, o) {
      if (dataTest.indexOf(o) == -1) {
        show = show && false;
      }
    });
    console.log(show);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="col-test" value="Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer" />
<select id="user-options" multiple>
</select>

When the User makes a selection, a change event is triggered. When there is a change the User's selection will be compared to the List of options. If the Option has a index of -1, it does not exist in the list and show will be set to false.

I did not have a complete set of options, so I had to build a list based on the only data that I have, which means all options selected will be in the list and you get true. So I added "Item 1" and "Last Item". If either are selected, you get false.