jQuery - change iframe src based on select value

Right now, I am trying to change the iframe src value based on what select is picked. I have multiple selects/iframes, so I need something to work for all instances.

<div class="wrap">
  <select class="changer">
    <option value="http://stackoverflow.com">StackOverflow</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
    <option value="http://twitter.com">Twitter.com</option>
  </select>
  <iframe src="http://stackoverflow.com"></iframe>
  </div>
  <div class="wrap">
  <select class="changer">
    <option value="http://stackoverflow.com">StackOverflow</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
    <option value="http://twitter.com">Twitter.com</option>
  </select>
  <iframe src="http://stackoverflow.com"></iframe>
</div>

CSS:

.wrap {
  width:50%;
  float:left;
}
iframe {
  width:100%;
  height:500px;
  display:block;
}

jQuery:

$('.changer').change(function () {
  $(this).attr('src', this.value);
});

solution

You were changing the src attribute of the select element rather than the iframe element.

Given the HTML, you could use .next('iframe') in order to change the source of the adjacent iframe element.

EXAMPLE HERE

$('.changer').change(function () {
  $(this).next('iframe').attr('src', this.value);
});