jQuery - 通过选择选项加载图像

我试图显示一个不同的图像（与DIV <div id="Couleur13"></div>）为每个选项使用jQuery选择，它工作时，我选择另一个选项（但不是预选的），它消失加载后一秒钟。jQuery - 通过选择选项加载图像

下面是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>

任何想法？谢谢！

来源

2013-02-28 laurent34

尝试

$('select[name=PDTOPTVALUEID0]').on("change",function() { 
     $("#Couleur13").html("<img src='"+$(this).val() + ".jpg'/>"); 
});

来源

2013-02-28 10:47:32 sam

试试这个：

<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，而不是整个图像

来源

2013-02-28 10:47:59 karaxuna

谢谢，但它不起作用。但也许这是我的错，我编辑了我的问题，因为我忘了添加URL的开头，我不知道如何（在哪里）在您的建议中添加此部分。 – laurent34 2013-02-28 11:13:20

@ laurent34编辑答案。它没有测试，但我认为它应该工作 – karaxuna 2013-02-28 11:17:07

图像将被存储在另一台服务器（http://www.unmeubleenpin.com/），你可以编辑你的答案，然后我可以正确测试它？谢谢。 – laurent34 2013-02-28 11:19:54

delegate它

$('body').delegate("select[name=PDTOPTVALUEID0]","change",function() { 
     $("#Couleur13").html($("<img src='"+$(this).val() + ".jpg'/>"); 
});

来源

2013-02-28 10:48:45 coolguy

谢谢，但它不能正常工作。 – laurent34 2013-02-28 11:11:28

触发change on 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

来源

2013-02-28 10:56:24 Jai

谢谢，但它不能正常工作。 – laurent34 2013-02-28 11:10:42

尝试拆下在线'OnChange'。 – Jai 2013-02-28 11:14:07

我不能，我需要这个Onchange来管理购物车的使用 – laurent34 2013-02-28 11:16:59

为什么你需要两个onchange函数？，我想它会造成你的问题case .try执行一个

1- OnChange="OnChangeOption(); 
2- $('select[name=PDTOPTVALUEID0]').change();

来源

2013-02-28 10:58:49

感谢您的建议，但我不能编辑HTML代码... – laurent34 2013-02-28 11:09:48

然后在OnChangeOption（）函数中执行onchange逻辑并删除jquery onchange – 2013-02-28 11:22:39

jQuery - 通过选择选项加载图像

回答

相关问题