onchange event fires alternatety

Question

So I'm working on hiding and showing controls in php and I have this <select> field with change event and in onchange I want to hide the controls for 'Single Employee' as well as for the other options. So here is my code:

  <select name="civilstatus" class="form-control" id="civilstatus">
        <option value="Single">Single</option>
        <option value="Married">Married</option>
        <option value="Widow">Widow</option>
        <option value="Annulled">Annulled</option>
        <option value="Seperated">Seperated</option>
  </select>

  $(document).on('change','#civilstatus',function(){
    var cstatus = $(this).val();
    if(cstats === 'Single'){
        $('#spouse').slideUp( 1000 ).hide(0);
        $('.spouse').slideUp( 1000 ).hide(0);
        return false;
    }else{
        $('.spouse').val(null);
        $('#spouse').fadeToggle( 1000 ).show();
        $('.spouse').fadeToggle( 1000 ).show();
        return false;
    }
})

And so my problem is that when I select alternately it also works alternately. What I want is just to hide the controls only when the value of my <select> is Single. Because when I select other options Widow for example then the controls hide, when I select Seperated the controls are showing. So how to fix this?

Answer 1

Are you sure that fadeToggle().show() is what you want? The .show() will not have any effect in this situation.

I think you are looking for .fadeIn().

Answer 2

I added a console log function to you can test you are getting the responses: good luck :)

           <select name="civilstatus" class="form-control" id="civilstatus">
            <option value="Single">Single</option>
            <option value="Married">Married</option>
            <option value="Widow">Widow</option>
            <option value="Annulled">Annulled</option>
            <option value="Seperated">Seperated</option>
            </select>
            <script type="text/javascript">
            $('#civilstatus').on('change', function(){
            var cstatus = $(this).val();
            console.log(cstatus);
            if(cstatus == 'Single'){
                $('#spouse').slideUp( 1000 ).hide(0);
                $('.spouse').slideUp( 1000 ).hide(0);
                return false;
            }else{
                $('.spouse').val(null);
                $('#spouse').fadeToggle( 1000 ).show();
                $('.spouse').fadeToggle( 1000 ).show();
                return false;
            }
            });     

            </script>