Adding a class based on a value (jquery)

user_17562686 0
Viewed 31

I have a little problem with the following piece of code:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var val = $(this).attr("value");
            if(val){
                $(".place").not("." + val).hide();
                $("." + val).show();
            } else{
                $(".place").hide();
            }
        });
    }).change();
});
</script>

I want to adapt the code because there is a value that has spaces in it and so it doesn't work for this one. The value that doesn't work has 2 spaces in it: "Garantie Jeunes (Antibes)" (that's the exact name). The other values have no spaces.

<select tabindex="" id="Antenne" name="Antenne" class="fusion-form-input" data-holds-private-data="false">
<option value="Antibes">Antibes</option>
<option value="Biot">Biot</option>
<option value="Châteauneuf-Grasse">Châteauneuf-Grasse</option>
<option value="Garantie Jeunes (Antibes)">Garantie Jeunes (Antibes)</option>
<option value="Valbonne">Valbonne</option><option value="Vallauris">Vallauris</option>
<option value="Villeneuve-Loubet">Villeneuve-Loubet</option></select>
select class jquery
1 Answers

As you've discovered the spaces within the class attribute means its interpreted as multiple separate classes instead of a single one, so you cannot select by it.

To work around this you can use data attributes on the target elements, along with filter() to retrieve them, like this:

jQuery($ => {
  let $places = $('.place');

  $("select").on('change', function() {
    let val = $(this).val();    
    $places.hide().filter(function() {
      return $(this).data('loc') === val;
    }).show();
  }).change();
});
.place { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select tabindex="" id="Antenne" name="Antenne" class="fusion-form-input" data-holds-private-data="false">
  <option value="Antibes">Antibes</option>
  <option value="Biot">Biot</option>
  <option value="Châteauneuf-Grasse">Châteauneuf-Grasse</option>
  <option value="Garantie Jeunes (Antibes)">Garantie Jeunes (Antibes)</option>
  <option value="Valbonne">Valbonne</option>
  <option value="Vallauris">Vallauris</option>
  <option value="Villeneuve-Loubet">Villeneuve-Loubet</option>
</select>

<div data-loc="Antibes" class="place">Antibes</div>
<div data-loc="Biot" class="place">Biot</div>
<div data-loc="Châteauneuf-Grasse" class="place">Châteauneuf-Grasse</div>
<div data-loc="Garantie Jeunes (Antibes)" class="place">Garantie Jeunes (Antibes)</div>
<div data-loc="Valbonne" class="place">Valbonne</div>
<div data-loc="Vallauris" class="place">Vallauris</div>
<div data-loc="Villeneuve-Loubet" class="place">Villeneuve-Loubet</div>

Note in the above example the use of jQuery 3.6.0, which is the latest version as of this answer. 1.12.4 is outdated and needs to be updated.

Also, note that you can retrieve the selected value of the select using val() directly, without needing to loop through all the option:selected elements.

user_5194130
Related