在选择中更改更改选项上的图像

Question

我有一个选项列表。在更改选项的情况下，我想要更改图像。

我的代码不起作用。我认为原因是我想在var imgsrc = data（'divid'）中获取图像的正确URL

有人可以帮忙吗？

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

为了实现悬停的更改，您需要一个自定义选择插件。

由于交叉原因问题，我不得不更改图片网址。

您的代码不起作用，因为您需要选择选项元素。 change事件的目标元素是select标记。但是你可以使用this.value从select元素中获取所选元素的值：

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