laurareed50
New Member
I'm trying to use a \[code\]<select>\[/code\]-element to display different image sliders according to the selected option. I'm totally aware that there might be better ways to do this but since performance doesn't matter in this case I think the following might be the easiest option.This is the HTML:\[code\]<select id="album-select"> <option value="http://stackoverflow.com/questions/15476307/album1" selected="selected">Album 1</option> <option value="http://stackoverflow.com/questions/15476307/album2">Album 2</option> <option value="http://stackoverflow.com/questions/15476307/album3">Album 3</option> <option value="http://stackoverflow.com/questions/15476307/album4">Album 4</option></select><ul id="album1-slides" class="rslides"> <li><img src="http://stackoverflow.com/questions/15476307/img/album/1.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/2.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/3.jpg" alt=""></li></ul><ul id="album2-slides" class="rslides"> <li><img src="http://stackoverflow.com/questions/15476307/img/album/4.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/5.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/6.jpg" alt=""></li></ul><ul id="album3-slides" class="rslides"> <li><img src="http://stackoverflow.com/questions/15476307/img/album/7.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/8.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/9.jpg" alt=""></li></ul><ul id="album4-slides" class="rslides"> <li><img src="http://stackoverflow.com/questions/15476307/img/album/10.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/11.jpg" alt=""></li> <li><img src="http://stackoverflow.com/questions/15476307/img/album/12.jpg" alt=""></li></ul>\[/code\]I'm using Responsive Slides, though that doesn't really matter since it works flawlessly. Just in case you are wondering about the \[code\]<ul><li></li></ul>\[/code\]-structures.All \[code\]<ul>\[/code\]-elements have \[code\]display: none\[/code\] assigned via CSS.And this is my JavaScript/jQuery code:\[code\]<script>$(document).ready(function() { $("#album1-slides").show(); function changeGallery(gallery) { $(".rslides").hide(); var newGallery = "\"" + gallery + "-slides" + "\""; $(newGallery).show(); } $("#album-select").change(function() { var gallery = "#" + $("#album-select").val(); changeGallery(gallery); }); });</script>\[/code\]So, when I open the page the first album is automatically displayed. When changing the selected \[code\]<option>\[/code\] it should hide the displayed album (by hiding all of them since this is the fastest way) and display the new one.I don't know what the problem is, but when I try it, I get the following error in the console:\[code\]Uncaught Error: Syntax error, unrecognized expression: "#album2-slides"\[/code\]Which makes no sense to me because this is exactly the selector I want to have in my \[code\]$(selector).show();\[/code\]. I guess it has something to do with the quotes but googling didn't help me.I'm using jQuery 1.9.1.Thank you in advance for any suggestions and solutions! 