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 - 通過選擇選項加載圖像

回答

相關問題