從選擇框中選擇選項從本地服務器更改圖像

我有一個選擇框，並通過從選擇框中選擇選項我想更改我的瀏覽器上的圖像，但我不想在我的代碼上編寫所有圖像。如果你不明白下面的代碼 -從選擇框中選擇選項從本地服務器更改圖像

<select> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
</select> 


<ul> 
    <li id="myImg">  
     <img src="images/1.jpg"> 
    </li> 
</ul>

以上是我的html，但我不知道它是什麼的Java腳本。我只是想要每當我從選擇框中選擇選項時，圖像應該被改變，並且它會從我的本地系統中拾取並替換舊的。這可能嗎？或者我只是在問一個愚蠢的問題？其實我想在我的項目中，請別人幫忙。感謝

來源

2016-12-08 Nitish Kumar

HTML：

<select id="select"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select>

的Javascript：

document.getElementById('select').onchange = function(){ 
    document.querySelectorAll('#myImg img')[0].src = '/images/' + this.value + '.jpg'; 
};

來源

2016-12-08 16:43:05

感謝您的回覆......但是當我從選擇框中選擇值時，它給了我錯誤「Uncaught TypeError：無法設置未定義（...）的屬性'src'」。 –

請確保您的選擇框具有'id =「選擇」'並且包含您的'img'的'li'具有'id =「myImg」'（區分大小寫） –

感謝它的工作 –

<select name="select_image" id="select_image" 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 alue="http://limg.imgsmail.ru/s/images/logo/logo.v2.png">Mail</option> 
</select> 
<img src="https://www.google.ru/images/srpr/logo4w.png" name="image-swap" /> 

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

來源

2016-12-08 16:40:57 Arun

謝謝您的回覆，但如果我需要改變很多或超過40倍的圖像會發生。我需要傳遞那些會增加我的代碼的圖像，而我不想那樣做。我所需要的僅僅是從本地或服務器中選擇圖像，當我從選擇框中選擇值時，我只需提供一個「src」路徑，所有圖像將在服務器或本地。 –

從選擇框中選擇選項從本地服務器更改圖像

回答

相關問題