1

jQueryで選択したオプションごとに（ DIV を使用して）異なる画像を表示しようとしています<div id="Couleur13"></div>が、別のオプションを選択すると機能し（ただし、事前に選択されたオプションでは機能しません）、ロード後1秒で消えます。

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>

何か案は？ありがとう！

4

5 に答える 5

0

次のように変更時にトリガー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
于 2013-02-28T10:56:24.770 に答える
0

試す

$('select[name=PDTOPTVALUEID0]').on("change",function() {
         $("#Couleur13").html("<img src='"+$(this).val() + ".jpg'/>");
 });
于 2013-02-28T10:47:32.210 に答える
0

これを試して：

<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-28T10:47:59.017 に答える
0

delegateそれ

$('body').delegate("select[name=PDTOPTVALUEID0]","change",function() {
         $("#Couleur13").html($("<img src='"+$(this).val() + ".jpg'/>");
 });
于 2013-02-28T10:48:45.163 に答える
0

なぜ 2 つの onchange 関数が必要なのですか? 、私はそれがあなたの場合に問題を引き起こすと思います.1つを実行してみてください

1- OnChange="OnChangeOption(); 
2- $('select[name=PDTOPTVALUEID0]').change();
于 2013-02-28T10:58:49.313 に答える