选择选项并隐藏div jquery

Question

I've been searching without luck a solution to this...Im trying to do a function that hide a div on an selected option in a select box but I cant make it work properly, I mean, it works if I refresh the page with the option that hide the div selected, the div is hided, I change option, the div is visible, BUT if I come back to the option that should hide the div... it doesnt hide it... What Im doing wrong?

This is my function:

  $(function(){ if ( $('select#CW_Type').val() ==='APPROVED' ) { $('#creditLimit').addClass('hide'); $('select#CW_Type').on("change",function() { $('#creditLimit').removeClass('hide'); }); }; }); 

the id "#creditLimit" is the div that should be hided and then be showed again This is my HTML

 <div> <label> Type <select id="CW_Type" name="CW_Type"> <option value="-">-</option> <option value="APPROVED">APPROVED</option> <option value="LIMIT">LIMIT</option> <option value="MANUAL_DECISION">MANUAL DECISION</option> <option class="selected" value="DENIED">DENIED</option> </select> </label> </div> <div id="creditLimit" class="span6"> <label class="half"> Credit Limit <input type="number" name="CW_CreditLimit" value="0" min="0" step="1" data-validate="currency"> </label> <label class="half"> Currency <select name="CW_Currency"> <option value="-">-</option> <option value="SEK">SEK</option> <option value="EUR">EUR</option> </select> </label> </div> <style> .hide {display:none;} </style> 

Thanks in advance for any suggestion!

Answer 1

You need a change function for the select , then check the value and do your logic:

$("select#CW_Type").change(function() {
    if ( this.value ==='APPROVED' ) {
        $('#creditLimit').addClass('hide');
    } else {
        $('#creditLimit').removeClass('hide');
    }
}).change(); //call on load

You currently have a change handler - but it's only being bound when your if condition is satisfied - and if that isn't on load, then the handler will never be bound.