selectオプションとhide div jquery

Question

私はこの問題に対する解決策を探すことはしていません...選択ボックスで選択されたオプションのdivを隠す関数を実行しようとしていますが、 divを非表示にするオプションを指定してページをリフレッシュすると、divが表示されず、divが表示され、divが表示されますが、divを非表示にするオプションに戻ると動作します。それを隠す...何が間違っている？

これは私の関数である：

$(function(){ 
 

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

ID "#creditLimitは" 隠してしなければならないし、再度 これは

<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>

私のHTMLで示したことがdiv要素であります ご意見ありがとうございます。

Answer 1

あなたはその後、値をチェックし、あなたのロジックを行い、selectためchange機能が必要になります。

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

あなたは現在changeハンドラを持っている - しかし、あなたのif条件が満たされたときにのみ拘束されるものだ - と場合ロードされていない場合、ハンドラは決してバインドされません。