CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
dotslashlu
dotslashlu

Reputation: 3401

Why my self made drop down list doesn't work in IE 7

Code works perfectly in other browsers but not in IE7. Problem in IE7 is that the second level of the list(ul .opt_1) won't show when the first level is selected. Here's the HTML part:

<input type="button" id="topic" value="please select a topic"/>
<div class="c"></div>
<ul id="opt_0">
<li class="opt_0">finance</li>
<ul class="opt_1">
<li>business</li>
<li>stock</li>
<li>company</li>
<li>startup</li>
</ul>
<li class="opt_0">IT</li>
<ul class="opt_1">
<li>internet</li>
<li>code</li>
<li>hardware</li>
</ul>
</ul>
<input type="hidden" name="topic"/>

and JS part:

$(function(){
$("#topic").click(function(){
    $("#opt_0").slideDown();
})
$(".opt_0").click(function(){
        $(".opt_0").removeClass("selected");
        $(this).addClass("selected");
        $(".opt_1").hide();
        $(this).next(".opt_1").show();
    })
$(".opt_1 li").click(function(){
    $("#opt_0").slideUp();
    $("#topic").val($(".selected").html()+">>"+$(this).html());
    $("input[name=\"topic\"]").val($(".selected").html()+";"+$(this).html());
})
})

You can see JS fiddle here:http://jsfiddle.net/lornechang/4BmPb/
How do I make it compatible with IE7? Thanks.

Upvotes: 0

Views: 287

Answers (1)

Kevin B
Kevin B

Reputation: 95023

Your html is not valid. I made the changes required to make it correct in this fiddle:

http://jsfiddle.net/4BmPb/1/

<input type="button" id="topic" value="please select a topic"/>
<div class="c"></div>
<ul id="opt_0">
    <li class="opt_0">finance</li>
    <li class="opt_1">
        <ul>
            <li>business</li>
            <li>stock</li>
            <li>company</li>
            <li>startup</li>
        </ul>
    </li>

    <li class="opt_0">IT</li>
    <li class="opt_1">
        <ul>
            <li>internet</li>
            <li>code</li>
            <li>hardware</li>
        </ul>
    </li>
</ul>
<input type="hidden" name="topic"/>

A ul element can only contain li elements, not other ul elements.

As far as why it works in other browsers, other browsers are not as strict as IE is with html structure. I tested this in IE9 which presented the same problem, have not tested in IE7 but I suspect it will work too.

Upvotes: 5

Related Questions