Question

I am trying to have the users avatar change based on what account they have selected from a dropdown box. I wrote some jQuery that I think should work as I am using it for a similar application to do the same thing ( with facebook urls not twitter )

http://jsfiddle.net/JPT3K/3/

<select id="twid-4646464" onChange="updateTwPic(4646464);">
  <option value="billpull-1">BillPull</option>
  <option value="billpull1-2">BillPull1</option>
</select>

 function updateTwPic(postid){
    var twhandle = $('#twid-'+postid).val().split('-');
    twhandle = twhandle[0];
    var picurl = "http://api.twitter.com/1/users/profile_image/"+twhandle;
    $('#twpic-'+postid).attr('src',picurl);
 }​

Answer 1

Your code works fine if set up correctly: http://jsfiddle.net/86nfP/

Note that I changed onDomReady to no wrap (head).

So what went wrong? updateTwPic was defined not in the global scope but in the ready event handler, so JavaScript could not find it.
If you have had a look at the console, you would have seen:

Uncaught ReferenceError: updateTwPic is not defined

---

You could simply attach the event handler with jQuery to avoid such problems:

$(function() {
    // this code runs when the DOM is loaded, no matter where it is located
    $('#twid-4646464').change(function() {
        var postid = this.id.split('-')[1],
            picurl = "http://api.twitter.com/1/users/profile_image/"+this.value.split('-')[1];
        $('#twpic-'+postid).attr('src',picurl);
    });
});

You could also make use of data-* attributes, which would be even cleaner:

<select id="twid-4646464" data-postid="4646464">

and in the event handler:

var postid = $.data(this, 'postid');