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
