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
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.