Change the ID attribute of a <span> when user selectes a new option from list
<p>I'm trying to update the id attribute of the <code>&lt;span&gt;</code> below when a user changes an option in the <code>&lt;select&gt;</code>, but really struggling.</p>

<pre><code>&lt;h5 class="wide"&gt;
    Image to show:
    &lt;span id="image-preview-6385" class="colorbox-preview"&gt;preview&lt;/span&gt;
&lt;/h5&gt;
&lt;select id="agri-image-id" class="wide image-select" name="middle_header_service[agriculture][image_id]"&gt;
    &lt;option value="-1"&gt;No image for this service&lt;/option&gt;
    &lt;option value="6176"&gt;Brick houses (150x80)&lt;/option&gt;
    &lt;option value="6175"&gt;Brick houses (little ... (150x53)&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>My code so far -</p>

<pre><code>jQuery('.image-select').change(function(e){

    selected_id = jQuery(this).val();
    jQuery(this).prev('h5 span.colorbox-preview').attr('id', 'image-preview-'+selected_id);

});
</code></pre>

<p>I can get a response when I use <code>alert(jQuery(this).prev('h5')).attr('id'))</code>, but anything beyond that comes back as <code>undefined</code>. Could someone please tell me what I am doing wrong? Thanks.</p>
