使用DIV標記中的選擇列表加載圖像

Question

我想要在帶有選擇列表的div標籤中加載圖片，當點擊圖片1，圖片1加載時。當我點擊圖片2，圖片2來加載...並且，例如，當圖片1被加載時，當按下圖片2按鈕加載...我嘗試了很多方法，但是我失敗了。

<select id="mypicture" class="dropdown"> 
<option value="">Choose picture...</option> 
<option value="1">Picture 1</option> 
<option value="2">Picture 2</option> 
<option value="3">Picture 3</option> 
<option value="4">Picture 4</option>   
     </select> 

這是我code

Answer 1

你缺少你的代碼中的實際圖像顯示。

您需要做的是在重新配置更改事件處理程序中的所有按鈕後，需要顯示圖像。

$('div').html('<img src="'+imgUrl+'">'); 

，你需要設置imgUrl的取決於選擇的值，或可以選擇元件上的網址，以便您可以像這樣檢索：

<option value="1" data-imgurl="imgs/img1.jpg"> 

我已經更新了你的提琴與另一種解決方案http://jsfiddle.net/Wdw4z/1/

Answer 2

您需要創建一個新的img並將其附加到div。

的Javascript

$(document).ready(function() { 
    var pictures = ["https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQYN2T3dktBEDIuwIuosj8ulzlwGod-KabDTy2vBFC-Kht_u4ep","https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQgBLpqp92lc7JQiNszqO_ZP52OymeqShqxqcrlUDcae9UaTTLtfQ", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS99xzsoRm3g0nckrH-SjfgSe8zgeYSCgc23IqtbtocZo3sjZN2gA", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBLBxc5mMj9WbV9ghIyfpmOfVdt0qyIe21f8HBlqwvVoGgCxQucA"]; 
    $(".nextbutton").button({ disabled: true }); 

    $('.dropdown').change(function() { 
     var value = $('.dropdown').val(); 
     if (value== 0) { 
      $(".prevbutton").button({ disabled: true }); 
     } else if (value == 1) { 

      $(".prevbutton").button({ disabled: true }); 
      $(".nextbutton").button({ disabled: false }); 
     } else if (value == 4) { 
      $(".nextbutton").button({ disabled: true }); 
     } else { 
      $(".nextbutton").button({ disabled: false }); 
      $(".prevbutton").button({ disabled: false }); 
     } 

     //Emptys picture div and appends image 
     $("#picture").empty(); 
     $("#picture").append($("<img/>",{src: pictures[value-1]})); 
    }); 
$(".prevbutton").button({ disabled: true }); 

}); 
$("#next").click(function() { 
    var nextElement = $('#mypicture > option:selected').next('option'); 
    if (nextElement.length > 0) { 
    $('#mypicture > option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); 
    $('.dropdown').trigger('change');  
    } 
}); 

$("#prev").click(function() { 
    var nextElement = $('#mypicture > option:selected').prev('option'); 
    if (nextElement.length > 0) { 
    $('#mypicture > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected'); 
    $('.dropdown').trigger('change');   
    } 
}); 

HTML

 <select id="mypicture" class="dropdown"> 
<option value="">Choose picture...</option> 
<option value="1">Picture 1</option> 
<option value="2">Picture 2</option> 
<option value="3">Picture 3</option> 
<option value="4">Picture 4</option>   
     </select> 
<hr> 
<button id="prev" class="prevbutton">Previous</button> 
<button id="next" class="nextbutton">Next</button> 
<hr> 
<div id="picture"> 
</div> 

工作實例：http://jsfiddle.net/Wdw4z/3/

Answer 3

我能想到的兩種方法可以做到這一點：

選項1

一個img標籤添加到您的股利。對於每次更改下拉菜單，都可以相應地更改img標籤的src。

例子：http://jsfiddle.net/MfPyU/

選項2

這是我的喜好，你可以創建動態使用JS一個新的img標籤。這在我看來的好處是你可以添加一個onload事件監聽器的圖像和顯示文本，如加載圖像時加載。

例如：http://jsfiddle.net/QW4Sp/