javascript - 当选择或取消选择特定下拉选项时切换隐藏的 div

Question

我能够在 stackoverflow 上找到一个示例来完成我想要的操作。但是，当我在代码中实现它并选择将显示隐藏的 div 的选项时，隐藏的 div 将不会出现，并且不确定原因。

HTML:

<td class="mm1" width="40%">
    <br />
    <ul>
        <li>
            <label for="name">Please select a company below:</label>
            <select class="selectmenu" id="select">
                <option selected disabled class="hideoption">Please select one company</option>
                <option value="0">RMG</option>
                <option value="1">LMG</option>
                <option value="2">CSC</option>
                <option value="3">ADOC</option>
            </select>
            <div id="hidden_div" style="color:#B9B9B9; display:none">
                If ADOC-does<br />position support UCMG?<br />
                <input type="checkbox" /> YES&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" /> NO
            </div>
        </li>
    </ul></td>

CSS:

/*Simple Dropdown box*/
    .selectmenu{
        font-family: arial, sans-serif, tahoma;
        -webkit-appearance: none;  /*Removes default chrome and safari style*/
        -moz-appearance: none; /* Removes Default Firefox style*/
        background: white;
        width: 80px; /*Width of select dropdown to give space for arrow image*/
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
        color: black;
        border-radius: 2px;
        padding: 5px;
        border:0 !important;
        box-shadow: inset 0 0 1px rgba(000,000,000, 0.5);
        font-size: 1.2em;
    }

Javascript:

$(function() {
    $('#select').change(function(){
        if ($(this).val() == "3") {
            $('#hidden_div').show();
        } else {
            $('#hidden_div').hide();
        }
    });
});

Answer 1

我尝试了你的代码。这是工作。也许尝试一些替代方案。使用 jQuery 的 .css() 函数将显示从 none 更改为 block，反之亦然。

$(function() {
    $('#select').change(function(){
        if ($(this).val() == "3") {
            $('#hidden_div').css('display','block');
        } else {
            $('#hidden_div').css('display','none');
        }
    });
});

这是证明它有效的屏幕截图:

希望这有帮助。祝你好运!