Toggle a hidden div when a particular dropdown option is either selected or de-selected

Question

I was able to find an example on stackoverflow to do what I wanted. However, when I implement it in my code and select the option that the will display a hidden div, the hidden div would not appear and not sure why.

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

I tried your code. It is working. Maybe try some alternatives. Use .css() function of jQuery to change the display from none to block and vice versa.

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

Here's a screenshot to prove that it works:

Hope this helps. Goodluck!