Image sliding in jquery

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:

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

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

Drop down menu:

<select id="slideshow_effects">
<option value="fade">Fade</option>
<option value="fadeZoom">FadeZoom</option>
<option value="cover">Cover</option>
<opti开发者_开发技巧on value="toss">Toss</option>
<option value="blindY">BlindY</option>
</select>

---

In these cases I would the following structure:

<div class='slider'>
    <select class='drop' >...</select>
    <div class='slideshow'></div>
</div>

now in js:

$(".slider").each(slider_init);

function slider_init(index, el)
{
    var drop = $(el).find(".drop");
    var slideshow = $(el).find(".slideshow");

    // now initialize slider here for drop and slideshow
    slideshow.cycle({
        fx: drop.val(),
        speed: 1000,
        timeout: 2000
    });});
}

actually this way you initialize each occurrence of your slider individually and for each initialization the code finds the relevant select element.

This way no matter how many "sliders" you have on page, each will work individually