Загрузить изображения с выбранным списком в теге Div

Я хотел бы загрузить изображение в теге div с помощью списка выбора, когда я нажимаю на картинку 1, картинка 1 для загрузки. Когда я нажимаю на картинку 2, картинка 2, чтобы загрузить ... И, когда, например, загружается Изображение 1, а при нажатии следующей кнопки Изображение 2 загружается ... Я пытался разными способами, но я потерпел неудачу.Загрузить изображения с выбранным списком в теге Div

<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

источник

2013-06-06 Godfather

Вы пропускаете фактическое отображение изображения в коде.

Что вам нужно сделать, это после того, как вы переконфигурируете все кнопки в обработчике событий изменений, вам нужно отобразить изображение.

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

и вам необходимо установить imgUrl в зависимости от значения избранных, или URL-адрес на элементе опции, так что вы можете получить его следующим образом:

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

Я обновил свой скрипку с другим решением http://jsfiddle.net/Wdw4z/1/

источник

2013-06-06 08:36:25 Rodik

Родик, что оно, спасибо очень много. Он отлично работает для одного списка выбора, но с двумя списками не работает. Например, у меня есть два списка _Выберите изображение собаки ..._ и _Выберите изображение кошки ..._ _Выберите изображение собаки ..._ работает, но _Выберите изображение кошки ..._ не работает. В _Выберите изображение кошки ..._ Я установил для Picture 1 _value = "101" _ и _img101.jpg_, но не работает. Можете ли вы мне помочь, [здесь] (http://jsfiddle.net/Godfather/UEMCy/) - это мой код с двумя списками. – Godfather

Вам необходимо создать новый 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/

источник

2013-06-06 08:40:39

Я могу думать о двух способов сделать это:

Вариант 1

Добавить img тег в DIV. для каждого изменения выпадающего списка вы можете соответствующим образом изменить src тега img.

Пример: http://jsfiddle.net/MfPyU/

Вариант 2

Это мое предпочтение, вы можете создать новый тег IMG динамически с помощью JS. Преимущество этого, на мой взгляд, заключается в том, что вы можете добавить прослушиватель событий onload к изображению и отобразить текст, такой как «загрузка», пока изображение загружается.

Пример: http://jsfiddle.net/QW4Sp/

источник

2013-06-06 09:22:52 potatoes

Загрузить изображения с выбранным списком в теге Div

ответ

Смежные вопросы