JavaScript not Initializing in Drupal Block

Question

I have the following fiddle: http://jsfiddle.net/VYbLX/125/

The purpose is to update a thumbnail with the appropriate selection in the dropdown menu. I'm attempting to implement this piece of code inside of a Drupal block that will be dropped into a specific page.

The page it is implemented on is: http://sulzbachercenter.org/fundraisers/give-a-good-night In order to implement the code, I've rewritten the JS into a separate file and called it like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://sulzbachercenter.org/sites/default/files/ggn_js/dyn.js"></script>

The block can run PHP and HTML fully, so I know that's not an issue - but I'm out of troubleshooting ideas. Can anyone see why this code won't work in the Drupal environment?

Answer 1

The jQuery selector is looking for '#dynSelect', but the combobox in the form does not have an 'id'.

You can either add the id="dynSelect" to the combobox.

or
Change

$('#dynSelect').change(function () {
    var val = $('#dynSelect').val();
    $('#dynImg').attr("src",pictureList[val]);
});

to something like:

$("select[name='os0']").change(function () {
    var val = $("select[name='os0']").val();
    $('#dynImg').attr("src",pictureList[val]);
});