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');
        }
    });
});

这是一个截图，证明它有效：

希望这会有所帮助。古德勒克！

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

1 个答案: