[jQuery] Problem Targetting DIVs (Dynamic List Example)
Hi, can anyone tell me why this isn't displaying the default list
automatically when the page loads?
If you look in the code where the comments are, I think one of those
places is where the problem is. I can't work it out however as I am
fairly new to jQuery.
<html>
<head>
<title>Quick Links Tester</title>
<style type="text/css">.hide {display : none }</style>
<script type="text/javascript" src="jquery-1.2.3.min.js"></
script>
<script type="text/javascript">
$(function()
{
$("#QuickLinksSelect").show();
// The DIVs are dynamically named, so I can't just put
// "#0" here...
ShowOrHideQuickLinks($("#QuickLinks > div:first"));
$("select#QuickLinksSelect").change
(
function()
{
var selectedQuickLink = "#" + $("select#QuickLinksSelect").val();
ShowOrHideQuickLinks(selectedQuickLink);
}
);
});
function ShowOrHideQuickLinks(quickLinkToShow)
{
// alert gives [object Object] on load, which is not expected.
// alert gives #0 or #1 on select change, which is.
alert(quickLinkToShow);
$("#QuickLinks div").addClass("hide");
$(quickLinkToShow).removeClass("hide");
}
</script>
</head>
<body>
<div id="QuickLinksContainer">
<select id="QuickLinksSelect" style="display:none">
<option value="0">Default...</option>
<option value="1">1</option>
</select>
<div id="QuickLinks">
<div id="0">
<ul>
<li><a href="#">Default (1)</a></li>
<li><a href="#">Default (2)</a></li>
<li><a href="#">Default (3)</a></li>
<li><a href="#">Default (4)</a></li>
</ul>
</div>
<div id="1">
<ul>
<li><a href="#">1 (1)</a></li>
<li><a href="#">1 (2)</a></li>
<li><a href="#">1 (3)</a></li>
<li><a href="#">1 (4)</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Many thanks in advance.
If anyone is interested, my full example includes using a cookie to
remember your choice. I can post full code if I can just get the above
code working :)
Richard