JQuery Version Conflict with Div Search Effect

$(document).ready(function() {
  $(".form-select.pais").change(function() {
    var val = $(this).val();
    if (val != 'Any') {
      $("div.views-row, div.[class^='views-field-field-bank-office-pais-value-']").hide();
      $("div.views-row, div.views-field-field-bank-office-pais-value-" + val).show();
    } else {
      $("div.views-row, div.[class^='views-field-field-bank-office-pais-value-']").show();
    }
  });
});
div {
  background-color: #ddf;
  margin: 2px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="test">
  <p>
    Here is a text test!
  </p>
</div>


<select id="json-one" class="form-select pais">
  <option value="Any">Any</option>
  <option value="USA">USA</option>
  <option value="Chile">Chile</option>
  <option value="Spain">Spain</option>
</select>



<div class="views-row">
  <div class="views-field-field-bank-office-pais-value-USA">
    <span class="field-content">this is div USA</span>
  </div>
  <div class="views-field-field-bank-office-pais-value-Chile">
    <span class="field-content">this is div Chile</span>
  </div>
  <div class="views-field-field-bank-office-pais-value-Spain">
    <span class="field-content">this is div Spain</span>
  </div>
</div>

Hello,

I forked a fiddle that had a sliding effect and tweaked to my linking where it hides and shows depending on selection of a drop box. The issue I have is that is hiding all the divs on the page. For example the div with the class "test" should not hide but it is happening. That was not the intended effect I had in mind. (This has been fixed)

Thanks.

This is the code:

$(document).ready(function() {
  $('select').change(function() {
    var val = $(this).val();
    if (val != 'Any') {
      $('div:not(div.views-row, div.views-field-field-bank-office-pais-value-' + val + ')').hide();
      $("div.views-row, div.views-field-field-bank-office-pais-value-" + val).show();
    } else {
      $("div.views-row, div").show();
    }
  });
});
div {
  background-color: #ddf;
  margin: 2px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option value="Any">Any</option>
  <option value="USA">USA</option>
  <option value="Chile">Chile</option>
  <option value="Spain">Spain</option>
</select>

<div class="views-row">
  <div class="views-field views-field-field-bank-office-pais-value-USA">
    <span class="field-content">this is div USA</span>
  </div>
  <div class="views-field views-field-field-bank-office-pais-value-Chile">
    <span class="field-content">this is div Chile</span>
  </div>
  <div class="views-field views-field-field-bank-office-pais-value-Spain">
    <span class="field-content">this is div Spain</span>
  </div>
</div>

The fiddle: http://jsfiddle.net/yjc8jsvw/92/

Update: I forked the forked fiddle: http://jsfiddle.net/u96xfo4x/28/

Problem I have now is that this works with jquery 1.6 but not with 2.0+ with jquery migrate.

I need assistance updating this script.

Thanks.

Answers 1

Related Articles