Question

对于过滤器搜索，我正在使用表单显示下拉菜单，并且需要根据从菜单中选择的选项的值向父div添加或删除类。

此脚本至少存在两个问题： 1.它正在加载页面并立即添加类。我只需要在用户选择一个选项时运行它。 2.选择一个选项不会更新页面。 3.另外，我不确定我的变量$ key是否存储正确的值。我想要从选项中选择值。

我已经研究了几个类似的问题，并审阅了.select（）、. change（）和.trigger（）的jquery文档，但是我还没有将适合我情况的组合放在一起。

下面是我正在使用的精简基本脚本，该脚本有效地将类添加到示例HTML中。

<select name="SelectBox-ByDestination" id="SelectBox-ByDestination">
  <option value="" disabled selected hidden>Select a Destination...</option>
  <option value="Argentina">Argentina</option>
  <option value="Australia">Australia</option>
  <option value="Iceland">Iceland</option>
</select>

<div class="Item">
  <h3>Program</h3>
  <div class="destination">
    <h4>Destinations</h4>
    <ul>
      <li>Iceland</li>
    </ul>
  </div>
</div>

$(function () {
  $('#SelectBox-ByDestination').change(function() {
    var $dest = $(this).val();
    $('.destinations').each(function() {
      var $matches = $('.destination li').filter(function() {
        return $(this).text() === $dest
      });
      if (!$matches.length) {
        $(this).parent().addClass('hideByDestinationDropDownMenu');
      } else {
        $(this).parent().removeClass('hideByDestinationDropDownMenu');
      }
    });
  });
});

Answer 1

您需要做的第一件事是change上的<select>事件监听器

那么您想在事件触发时将其value与单个<li>元素中的文本进行比较

$('#SelectBox-ByDestination').on('change', function() {
  var dest = $(this).val();
  $('.destinations').each(function() {
    // filter matching `<li>` 
    var $matches = $('.destintion li').filter(function() {           
      return $(this).text() === dest// or use `includes() for partial matches
    });

    if(!$matches.length){
       // hide this destination div
    }else{
       // show it
    }

  });
});

我猜您也想隐藏其他<li>，但这应该可以让您入门

如何在下拉菜单事件中触发jquery脚本？

1 个答案: