modificare il valore src di un’immagine in base alle opzioni di valore in una casella di selezione

Ho un tag img e selezionare la casella di

<img src="" name="image-swap">

<select name="kitchen_color" id="kitchen_color">
    <option value="/static/imag1.jpg">Red</option>
    <option value="/static/imag2.jpg">Black</option>
    <option value="/static/imag3.jpg">White</option>

</select>

Ho bisogno di cambiare il valore src del tag img basato sulla casella di selezione del valore.

Se si seleziona l’opzione il ROSSO e il valore dell’opzione, Rosso(/static/imag1.jpg) dovrebbe compilare il src dell’immagine.

E anche selezionare la prima opzione di valore come l’immagine predefinita.

Che cosa hai fatto?
Hai provato te ?

OriginaleL’autore Sakeer | 2013-08-05

4 Replies
  1. 6
    $(document).ready(function(){
       $("#kitchen_color").change(function(){
         $("img[name=image-swap]").attr("src",$(this).val());
    
       });
    
    });

    Utilizzare il codice di cui sopra.

    Grazie yaar così semplice. Come io sono un principiante per jquery mi sento molto difficile..grazie……..
    il mio piacere yaar. basta accettare la risposta.
    come posso impostare l’immagine di default ? ho bisogno che il primo valore nella casella di selezione come la mia immagine di default…
    il valore di src e della stessa del valore di prima opzione della casella di selezione.

    OriginaleL’autore Code Lღver

  2. 2

    utilizzare una funzione sul vostro elenco di selezione

    $('#kitchen_color').change( function() {    
    $("#imgid").attr("src","new src value");
    });

    OriginaleL’autore Vinay Pratap Singh

  3. 1

    È possibile impostare onchange evento per il select.

    <select name="kitchen_color" id="kitchen_color" onchange="setImage(this);">
      <option value="https://www.google.ru/images/srpr/logo4w.png">Google</option>
      <option value="http://yandex.st/www/1.645/yaru/i/logo.png">Yandex</option>
      <option value="http://limg.imgsmail.ru/s/images/logo/logo.v2.png">Mail</option>
    </select><br />
    <img src="" name="image-swap" />  

    Javascript:

    function setImage(select){
      var image = document.getElementsByName("image-swap")[0];
      image.src = select.options[select.selectedIndex].value;
    }  

    Esempio c’

    OriginaleL’autore ostapische

  4. 0
    try this
    
    
    <img src="" class="image-swap">
    
    <select name="kitchen_color" id="kitchen_color" onchange="change_image()">
        <option value="/static/imag1.jpg">Red</option>
        <option value="/static/imag2.jpg">Black</option>
        <option value="/static/imag3.jpg">White</option>
    
    </select>
    
    
    $(document).ready(function(){
        $('.image-swap').attr("src",$('#kitchen_color').val());
    })
    
    function change_image(){
        $('.image-swap').attr("src",$('#kitchen_color').val());
    }
    impostazione del valore predefinito sembra non lavorare………

    OriginaleL’autore sangram parmar

Lascia un commento