Question

当我点击图片1，图片1加载时，我想在div标签中加载选择列表。当我点击图片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+'">');

你需要根据select的值设置imgUrl，或者在option元素上设置url，这样就可以像这样检索它：

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

我已经用另一种解决方案http://jsfiddle.net/Wdw4z/1/

更新了你的小提琴

Answer 2

我可以想到两种方法：

选项1

为您的div添加img标记。对于下拉菜单的每次更改，您都可以相应地更改img标记的src。

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

选项2

这是我的偏好，你可以使用JS动态创建一个新的img标签。在我看来，这样做的好处是你可以为图像添加一个onload事件监听器，并在图像加载时显示诸如“加载”之类的文本。

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

Answer 3

您需要创建一个新的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/

使用Div标签中的选择列表加载图像

3 个答案: