CODEWITHSUNDEEP
jquery
ChiSen
ChiSen

Reputation: 383

jQuery does not work in IE but works with Chrome and Firefox

I have a sample html code here and javascript that is perfectly working fine when being browsed by Google Chrome and Mozilla Firefox, but when viewed from Internet Explorer 9, it is now messing up.

My html code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="dummy.js"></script>
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <div id="dummy" style="display:none;"><option value="dummy">dummy</option></div>
        <table>
            <tr>
                <td>
                    <tbody id="MultCompanyIdPane">  </tbody>
                </td>
            </tr>
        </table>
    <script>modifyMultCompIdFunc();</script>
    </body>
</html>

and my sample javascript is:

function modifyMultCompIdFunc() {
    $("#MultCompanyIdPane").show();

        var html =
                '<tr>' +
                    '<td align="left">Company:</td>' +
                    '<td align="right">' + 
                        '<select id="var" class="UserMgmtInputText">' +
                            $("div#dummy").html() +
                        '</select>' +
                    '</td>' +
                '</tr>';
        $("#MultCompanyIdPane").append(html);
}

I've already tried to reset my IE configurations but it doesn't solve the issue. Any ideas on how to solve this issue? Or am I doing it wrong?

It mess up in terms of display, when being viewed in google chrome/mozilla, the drop-down list box is working (there's a value on the select box), but when viewed using IE9, there's no value in the drop-down list box.

Thanks.

Upvotes: 0

Views: 1006

Answers (2)

Juris Vaiders
Juris Vaiders

Reputation: 635

There are multiple problems in your example.

  1. MultCompanyIdPane id is used 2 times.
  2. IE not allow <option> tag to be used otside of <select> tag. That's why $("div#dummy").html() returns just text dummy instead of <option value="dummy">dummy</option>.

Working example.

Upvotes: 1

jalynn2
jalynn2

Reputation: 6457

You have two <tbody> elements with the same id (MultCompanyIdPane). Also, your <option> tag should be either <option>dummy</option> or <option value="dummy">dummy</option>.

Upvotes: 0

Related Questions