Btukfyl

I'm using ACF for the first time and struggling to get this to work. I've created a Select field with 2 options (This is controlled backend on the specific page)

<select id="acf-field_5bf80363f0c0f" class="" name="acf[field_5bf80363f0c0f]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="0">

<option value="No Issues">No Issues</option>

<option value="Issues reported" selected="selected" data-i="0">Issues Reported</option>

</select>

What i would like to achive is that if selected option is not equal to No Issues, it would add a custom class (.Error) to the selected div with the id #ServiceStatus1 for example. I've attempted with my limited knowledge of jQuery but no joy.

Hope this makes sense, any advice is really appreciated.

<script type ="text/javascript">

$(function() {

  $('#acf-field_5bf80363f0c0f').ready(function(){

    $('.Error').hide();

    $('#ServiceStatus1' + $('.Error').val() != 'No Issues').show();

  });

});

</script>

Your question and your code seem to be asking different questions...

If you want to add/remove a class based on the value in the select, you could do:

$(function() {



  function addServiceStatusClass(e){

    if($(this).val() != 'No Issues'){

        $('#ServiceStatus1').addClass('Error');

     }else{

        $('#ServiceStatus1').removeClass('Error');

     }

  }



  $('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);

  $('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);



});

Example:
http://jsfiddle.net/m2o361th/2/

But if all you want to do is show/hide #ServiceStatus1 based on the value, you can do:

$(function() {



function addServiceStatusClass(e){

    if($(this).val() != 'No Issues'){

        $('#ServiceStatus1').show();

     }else{

        $('#ServiceStatus1').hide();

     }

  }



  $('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);

  $('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);



});

Example:
http://jsfiddle.net/m2o361th/3/

Also as a reminder, if you're using the version of jQuery included with WordPress, you have to wrap your functions in a function mapped to jQuery:

(function($){

    // contains one of the above functions...

})( jQuery );

Thank you so much for the above. I've tweaked your above code to factor in that the select field is backend and my div is frontend. The working code for this is...

$(function() {



function addServiceStatusClass(e){

if($('#Multistream').text() != 'No Issues'){

    $('#ServiceStatus1').addClass('Error');

 }else{

    $('#ServiceStatus1').removeClass('Error');

 }

}



 $('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);

 $('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);



});

})( jQuery );