Image sliding in jquery
<p>I have an image slider widget in my application. I am using jquery cycle for that.. I have a drop down menu where I can change the effects of the slider. But I need to insert this image slider in more than one place in a single page. And for the drop down menu I have used id.. so when I insert the image in more than one page in a single page the effect would be same for all (as I hve used the id).. So I wanted to give a class name for drop down menu.. In that case how would i assign the effects value in jquery.. Please find the code below.. Any thoughts on this would be appreciated.?/ (I am just learning jquery and JS).
Jquery code:</p>

<pre><code>var effects_id = document.getElementById('slideshow_effects').value;
&lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/&gt;&lt;/script&gt;&lt;script type='text/javascript' src='/javascripts/jquery.cycle.all.min.js'/&gt;&lt;/script&gt;

&lt;script type='text/javascript'&gt; 
$.noConflict();
jQuery(document).ready(function(){
    jQuery('.editor_slideshow').cycle({
            fx: '"+effects_id+"',
            speed: 1000,
            timeout: 2000
        });});
&lt;/script&gt;
</code></pre>

<p>Drop down menu:</p>

<pre><code>&lt;select id="slideshow_effects"&gt;
&lt;option value="fade"&gt;Fade&lt;/option&gt;
&lt;option value="fadeZoom"&gt;FadeZoom&lt;/option&gt;
&lt;option value="cover"&gt;Cover&lt;/option&gt;
&lt;option value="toss"&gt;Toss&lt;/option&gt;
&lt;option value="blindY"&gt;BlindY&lt;/option&gt;
&lt;/select&gt;
</code></pre>
