Question

当页面加载有选择下拉菜单时，我需要该值来显示/隐藏结果（或添加一个类）。我的结果适用于更改，但不适用于页面加载。当前，所有结果都在页面加载时显示，而我只希望状态为“ AL”的结果在页面加载时显示。

$(document).ready(function() { 
      if ( ($('.broker-chosen select option:selected').val()=='AL') && (!$(".broker-locations_state:not(:contains('AL'))") ) ) { 
          $(".broker-results").addClass("chosen-results_wonky");
       }
});

.chosen-results_wonky { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="broker-chosen">
<select><option selected="" value="AL">Alabama</option><option value="AR">Arkansas</option></select>
</div>

<div class="broker-results row"><div class="broker-locations_state">AR</div> </div>

<div class="broker-results row"><div class="broker-locations_state">AL</div> </div>

Answer 1

由于您已经有一个change事件处理程序设置可以正常运行，因此只需触发一个change事件，您的现有代码就可以处理该事件。

看看下面的代码

$(document).ready(function() {
  $('select').on('change', function() {
    const selection = this.value;
    const allLocations = $('.broker-results').addClass('chosen-results_wonky');
    allLocations.filter(function() {
      return $('.broker-locations_state',this).text() === selection;
    }).removeClass('chosen-results_wonky');
  }).trigger('change');
});

.chosen-results_wonky {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="broker-chosen">
  <select>
    <option selected="" value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
  </select>
</div>

<div class="broker-results row">
  <div class="broker-locations_state">AR</div>
</div>

<div class="broker-results row">
  <div class="broker-locations_state">AL</div>
</div>

尝试在div中查找选定的值和内容以添加类

1 个答案: