jQuery -通过选择选项加载图像
jQuery - Load image by selecting option
我试图为jQuery选择的每个选项显示不同的图像(带有div <div id="Couleur13"></div>
),当我选择另一个选项时(但不是预选的选项),它会在加载后一秒钟消失。
这是HTML(我不能修改这部分):
<select class="PB" name="PDTOPTVALUEID0" size="1" OnChange="OnChangeOption();">
<option value="504031" selected="selected" >NATUREL - BRUT</option>
<option value="504032">CIRE - TEINTE MOYEN</option>
<option value="504033">CIRE - TEINTE FONCE</option>
<option value="504034">COULEUR - NOIR</option>
<option value="504035">COULEUR - BLANC</option>
<option value="504036">COULEUR - GRIS SOURIS CLAIR</option>
<option value="504037">COULEUR - GRIS SOURIS FONCE</option>
<option value="504038">COULEUR - GRIS PASTEL</option>
<option value="504041">COULEUR - GRIS ANTHRACITE</option>
<option value="504043">COULEUR - IVOIRE</option>
<option value="504044">COULEUR - BEIGE</option>
<option value="504045">COULEUR - CREME</option>
<option value="504046">COULEUR - TAUPE</option>
<option value="504047">COULEUR - JAUNE DOUX</option>
<option value="504048">COULEUR - ROUGE CARMIN</option>
<option value="504049">COULEUR - BORDEAUX</option>
<option value="504050">COULEUR - CHOCOLAT</option>
<option value="504051">COULEUR - WENGE CLAIR</option>
<option value="504052">COULEUR - WENGE</option>
<option value="504053">COULEUR - BLEU AZUR</option>
</select>
下面是jQuery代码:
<script type="text/javascript">
$(document).ready(function(){
$('select[name=PDTOPTVALUEID0]').change(function() {
$("#Couleur13").html($("<img />", { src: "http://www.unmeubleenpin.com/" + $(this).val() + ".jpg" }));
});
});
</script>
任何想法?谢谢!
Try
$('select[name=PDTOPTVALUEID0]').on("change",function() {
$("#Couleur13").html("<img src='"+$(this).val() + ".jpg'/>");
});
delegate
it
$('body').delegate("select[name=PDTOPTVALUEID0]","change",function() {
$("#Couleur13").html($("<img src='"+$(this).val() + ".jpg'/>");
});
为什么需要两个onchange函数?,我猜它在你的情况下产生了问题。试着执行一个
1- OnChange="OnChangeOption();
2- $('select[name=PDTOPTVALUEID0]').change();
触发change
对doc ready
的变化:
$('select[name=PDTOPTVALUEID0]').removeAttr('OnChange');
$('select[name=PDTOPTVALUEID0]').change(function() {
$("#Couleur13").html($("<img />", { src: $(this).val() + ".jpg" }));
}).change(); // <------------trigger it this way here
试试这个:
<div id="Couleur13">
<img src="default.png"/>
</div>
$(document).ready(function(){
$('select[name=PDTOPTVALUEID0]').change(function() {
var val = this.options[this.selectedIndex].value;
$("#Couleur13 > img").attr('src', val + ".jpg");
});
});
但我建议你改变图像的src,而不是整个图像
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像