Javascript Working in FF + IE9 but not IE8

Question

As the title says, my code works in the latest Firefox and IE9 but not IE8. Could anyone tell me why? Or perhaps give me another solution to hiding/showing a div based on a selected element. Thanks

<script type="text/javascript">
<!--
    /* Hide drop down if certain option selected */
    function hideField(field_id){
        var field = document.getElementById(field_id);
        field.style.display = "none";
    }
    /* Show drop down if certain option selected */
    function showField(field_id){
        var field = document.getElementById(field_id);
        if(field.style.display = "none"){
            field.style.display = "block";
        }
    }
-->
</script>


                    <select name="subject" id="subject" >
                        <option value="unselected">Please Select...</option>
                        <option value="Advertising" onclick="hideField('browserRow'),hideField('versionRow')">Advertising</option>
                        <option value="Complaint" onclick="hideField('browserRow'),hideField('versionRow')">Complaint</option>
                        <option value="Content Issue" onclick="hideField('browserRow'),hideField('versionRow')">Content/Information</option>
                        <option value="Website Error" onclick="showField('browserRow'),showField('versionRow')">Website Bug/Error</option>
                        <option value="Website Feedback" onclick="hideField('browserRow'),hideField('versionRow')">Website Feedback</option>
                        <option value="Other" onclick="hideField('browserRow'),hideField('versionRow')">Other</option>
                    </select>

            <div class="row" id="browserRow">
                <label>Your Browser: <font color="#FF0000">*</font></label>
                <select name="browser" id="browser">
                    <option value="unselected">Please Select...</option>
                    <option value="Android">Android</option>
                    <option value="Google Chrome">Google Chrome</option>
                    <option value="Mozilla Firefox">Mozilla Firefox</option>
                    <option value="Internet Explorer">Internet Explorer</option>
                    <option value="Safari">Safari</option>
                    <option value="Opera">Opera</option>
                    <option value="Other">Other</option>
                </select>
             </div>

            <div class="row" id="versionRow">
                <label>Browser Version: <font color="#FF0000">*</font></label>
                <input type="text" name="version" value="<?php echo $session->userinfo['version']; ?>" maxlength="10" id="bVersion">
                <span class="error"><?php echo $form->error("version"); ?></span>
                <script language="javascript">
                    var number = document.getElementById('version');
                    selectItemByValue(number, '<?php echo $form->value('version'); ?>');
                </script>
            </div>

Answer 1

IE does not support onclick for <option> .

The workaround is to use onchange on <select> .

See IE capture option element onclick for a detailed explanation.

Answer 2

在这里尝试使用分号而不是逗号：

onclick="hideField('browserRow');hideField('versionRow')"

Answer 3

The one big problem you have here is in your showField function:

if(field.style.display = "none")

This line of code is incorrect. You have used a single equal in the if() rather than a double-equal, so it will set the value of the display propery rather than checking what the value is.

This isn't the cause of your IE8 problem, but it is a serious error which needs to be pointed out. (although by pure luck it probably wouldn't have caused any issues for you in this case)