Change a value with a drop down list

Question

I have an iFrame that I need to change just one parts of the elements value

iframe src="http://www.twitch.tv/USERNAME"/

So the idea is that the user will select a name from a dropdown list and that will change the iFrame USERNAME to the correct user name:

So:

• Steve is selected in drop down list.

• Page reloads with the iFrame now having src="http://www.twitch.tv/STEVESUSERNAME/"

What would also be cool is if the page did not have to reload and only the iFrame had to reload.

Thank you

Answer 1

Try something like this

$('#Caster').change(function() {
  var value = $(this).find("option:selected").val();
  $('#CasterChat').attr('src', 'http://.../' + encodeURIComponent(value));
});

Answer 2

Are you trying to change source of "CasterChat" iframe only? You can use this:

$(document).ready(function(){
    $('#Caster').on('change', function(){
        $('#CasterChat').attr('src', 'http://www.twitch.tv/' + $('#Caster').val() + '/chat?popout=');
    });
});

Don't forget to load jQuery to make this work.