时间戳

首页 > 解决方案 > 试图在 div 中查找选定的值和内容以添加类

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

问题描述

当页面使用选择下拉列表加载时，我需要该值来显示/隐藏结果（或添加类）。我的结果正在改变，但不是页面加载。目前，所有结果都会在页面加载时显示，我只希望在页面加载时显示状态为“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>

标签： jqueryselect

解决方案

由于您已经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>

推荐阅读