CODEWITHSUNDEEP
javascriptjqueryimage
Europa
Europa

Reputation: 1284

Change image on change option in select

I have a select list with options. On the case of changing a option I want a image to change.

My code doesnt work. I think the reason is that I want to fetch the correct url to the image in the var imgsrc = data('divid')

Can anyone help? 

    $(document).ready(function(){
    	$("#inp_exercise_id").change(function(){
    		var imgsrc = $(this).data('divid');
    		$('.image-swap').attr("src",imgsrc);
    	});
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="" class="image-swap" style="float: right;">
    
    
    <p>
    <b>&Oslash;velse:</b> <br />
    <select name="inp_exercise_id" id="inp_exercise_id">
    	<option data-divid="../_uploads/exercises/no/strength/arms/triceps_nedtrekk_tau_i_kabel/triceps_nedtrekk_tau_i_kabel_2_guide_1_thumb_medium.png" value="2">Triceps nedtrekk tau i kabel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/biceps_curl_med_ez_stang/biceps_curl_med_ez_stang_3_guide_1_thumb_medium.png" value="3">Biceps curl med EZ stang</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/bicepscurl_med_hantler/bicepscurl_med_hantler_4_guide_1_thumb_medium.png" value="4">Bicepscurl med hantler</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/hammercurl_med_hantler/hammercurl_med_hantler_23_guide_1_thumb_medium.png" value="23">Hammercurl med hantler</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/liggende_tricepspress/liggende_tricepspress_31_guide_1_thumb_medium.png" value="31">Liggende tricepspress</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/franskpress/franskpress_37_guide_1_thumb_medium.png" value="37">Franskpress</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/en_arms_bicepscurl_med_hantel/en_arms_bicepscurl_med_hantel_40_guide_1_thumb_medium.png" value="40">En arms bicepscurl med hantel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/en_arms_tricepspress_med_hantel/en_arms_tricepspress_med_hantel_41_guide_1_thumb_medium.png" value="41">En arms tricepspress med hantel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/biceps_curl_med_ez_stang_over_benk/biceps_curl_med_ez_stang_over_benk_43_guide_1_thumb_medium.png" value="43">Biceps curl med EZ stang over benk</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/triceps_nedtrekk_stang_i_kabel/triceps_nedtrekk_stang_i_kabel_55_guide_1_thumb_medium.png" value="55">Triceps nedtrekk stang i kabel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/bicepspress_med_strikk/bicepspress_med_strikk_72_guide_1_thumb_medium.png" value="72">Bicepspress med strikk</option>
    </select>
    </p>

Thanks!

Upvotes: 1

Views: 1526

Answers (2)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

In order to achieve the change on hover you need a custom select plugin.

I had to change the images url because of cross origin issues.

Your code doesn't work because you need to select the option element. The target element of the change event is the select tag. But you can get the value of the selected element from the select element with this.value:

$(document).ready(function(){
    $("#inp_exercise_id").change(function(){
        var opt = $('option[value='+this.value+']', this);
        var divid = opt.data('divid');
    	$('.image-swap').attr("src",divid);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="inp_exercise_id" id="inp_exercise_id">
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Triceps&w=350&h=250" value="2">Triceps nedtrekk tau i kabel</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Biceps&w=350&h=250" value="3">Biceps curl med EZ stang</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Bicepscurl&w=350&h=250" value="4">Bicepscurl med hantler</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Hammercurl&w=350&h=250" value="23">Hammercurl med hantler</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Liggende&w=350&h=250" value="31">Liggende tricepspress</option>
</select>
<img src="" class="image-swap" style="float: right;">

Upvotes: 0

Jan Andersen
Jan Andersen

Reputation: 773

As long as we are not talking about hovering, but actually selecting if only just for a brief moment, it's fine. 

$(document).ready(function(){
    $("#inp_exercise_id").change(function(){
        var imgsrc = $(this).children("option:selected").attr("data-divid");
        $('.image-swap').attr("src", imgsrc);
    });
});

Upvotes: 1

Related Questions