Question

I’m trying to update the id attribute of the <span> below when a user changes an option in the <select>, but really struggling.

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

My code so far –

jQuery('.image-select').change(function(e){

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

});

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

Answer 1

Any one of following should work:

jQuery(this) // select box itself
         .prev('h5.wide') // prev h5 with class wide
         .find('span.colorbox-preview')  // search for span within h5
         .attr('id', 'image-preview-'+selected_id); // change id

OR

jQuery('h5.wide') // h5 itself
    .find('span.colorbox-preview').attr('id', 'image-preview-'+selected_id);