Hi guys, below code seems to work perfectly with the exception that the background image isn’t populated on select. Background color is working though. Can someone please take a quick look and see if you can point me to the right direction? Your help is greatly appreciated.
thanks.
<script type="text/javascript">
function showDiv()
{
// hide any showing
$(".details_div").each(function(){
$(this).css('display','none');
});
// our target
var target = "#details_" + $("#test_select").val();
// does it exist?
if( $(target).length > 0 )
{
// show it
$(target).css('display','block');
}
}
$(document).ready(function(){
// bind it
$("#test_select").change(function(){
showDiv();
});
// run it automagically
showDiv();
});
</script>
<style>
.details_div
{
display:none;
}
#details_book
{
background:url(images/imageBook.jpg)
border: 1px solid #cdcdcd;
background-color:#777;
}
#details_movie
{
background:url(images/imageMovie.jpg)
border: 1px solid #cdcdcd;
background-color;#888;
}
</style>
<select id="test_select">
<option value="">- Select - </option>
<option value="book" selected="selected">Books</option>
<option value="movie">Movie</option>
</select>
<div id="details_book" class="details_div">BOOK DETAILS</div>
<div id="details_movie" class="details_div">MOVIE DETAILS</div>