Изменить изображение при изменении опции в select

Question

У меня есть список выбора с опциями. В случае изменения параметра я хочу, чтобы изображение изменилось.

Мой код не работает. Я думаю, причина в том, что я хочу получить правильный URL-адрес изображения в var imgsrc = data ('divid')

Кто-нибудь может помочь?

    $(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>

Спасибо!

Answer 1

Пока мы не говорим о зависании, но на самом деле выбираем хотя бы ненадолго, это нормально.

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

Answer 2

Для того, чтобы добиться изменения при наведении, вам нужен плагин выбора.

Мне пришлось изменить URL-адрес изображения из-за проблем с перекрестным происхождением.

Ваш код не работает, потому что вам нужно выбрать элемент option. Целевым элементом события изменения является тег выбора. Но вы можете получить значение выбранного элемента из элемента select с помощью 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;">