javascript - jQuery parameter for a function -

this code using now:

$(document).ready(function(){   $('#btn2').click(function(){      $('iframe').contents().find('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/1.png)');     $('iframe').contents().find('body').css('opacity', 1.0);   }); }); 

and here's html:

<select onchange="bg(this[this.selectedindex].value);">  <option value="0.png" id="btn1">1. default skin</option>  <option value="1.png" id="btn2">2. mk7 collage</option>  <option value="1.png" id="btn3">3. solid queen</option> </select> 

when click 2. mk7 collage, can see in jquery function, background of iframe changes.

i have 3 option values , each 1 has different background , id. i'd change them everytime 'option value' clicked. it's like:

 $('#the_optionvalue_id').click(function(background_image_url){          $('iframe').contents().find('body').css('background-image', 'url(background_image_url)');         $('iframe').contents().find('body').css('opacity', 1.0);       }); 

i pretty new jquery , don't know how set id (the_optionvalue_id) , background_image_url every time option selected. help?

try :

<select id="bgselector">  <option value="0.png" id="btn1">1. default skin</option>  <option value="1.png" id="btn2">2. mk7 collage</option>  <option value="1.png" id="btn3">3. solid queen</option> </select> 

then put jquery code inside ready function :

<script> $(function() {     var iframe_body = $('iframe').contents().find('body'); //cache performance;      var set_bg = function(url) {         iframe_body.css({             'background-image': 'url(' + url + ')',             'opacity': 1.0);         });     }      $('#bgselector').change(function() {         set_bg($(this).val());     });      $('#btn2').click(function(){         set_bg('http://mk7vrlist.altervista.org/backgrounds/1.png');     }); }); </script>