javascript - 选择选项并隐藏 div jquery

Question

我一直在寻找解决方案，但不幸的是...我正在尝试执行一个函数，在选择框中的选定选项上隐藏一个 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这是我的 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>

在此先感谢您的任何建议!

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 条件时才被绑定(bind) - 如果未加载，则处理程序永远不会被束缚。