每一个selectedTest都存在于data-Test数组中并得到结果

Question

HTML

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

用户从下拉列表中选择了多个选项并获取值

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

这是伪代码

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)

以下代码存在问题。我需要确保每个 selectedTest 都存在于 data-Test 数组中。 return 结果与预期不符。代码有问题。

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
                  }
                });
              }

我可以在控制台中看到一遍又一遍地打印数据测试结果。我认为循环不起作用。

结果

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

Answer 1

考虑以下示例。

$(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>

当用户进行选择时，会触发 change 事件。当存在 change 时，用户的选择将与选项列表进行比较。如果选项的索引为 -1，它不存在于列表中，show 将被设置为 false。

我没有完整的选项集，所以我不得不根据我仅有的数据构建一个列表，这意味着所有选择的选项都会在列表中，你会得到 true。所以我添加了“Item 1”和“Last Item”。如果选择其中任何一个，您将得到 false.

每一个selectedTest都存在于data-Test数组中并得到结果

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

javascript

jquery

multi-select