javascript - 如何从数组中提取图像并将其放入列表中

Question

我有下拉列表

<select id="animal">
<option>Choose animal </option>
<option value="1">animal 1 </option>
<option value="2">animal 2</option>
<option value="3">animal 3 </option>
</select>

以及图像源的二维数组:

var pictureList = [
    ["images/img1.jpg","images/img2.jpg"],
    ["images/img3.jpg","images/img4.jpg", "images/img5.jpg"],
    ["images/img6.jpg"]
];

我无法创建一个脚本来从数组中提取图像并将它们插入到一个图像列表中。例如，如果我选择“动物 1”选项，我将得到

 <ul id="slider"> 
  <li><img class="imageClass" src="images/img1.jpg"/></li>
  <li><img class="imageClass" src="images/img2.jpg"/></li>       
 <ul>

对于“动物2”

  <ul id="slider"> 
   <li><img class="imageClass" src="images/img3.jpg"/></li>
   <li><img class="imageClass" src="images/img4.jpg"/></li> 
   <li><img class="imageClass" src="images/img5.jpg"/></li>      
  <ul>

Answer 1

重新表述您的要求:

You need to select one animal, and print on the screen the list of images associated with that animal.

您所需要的只是获取所选动物的值并查询数组中的相应位置并使用该数组打印 HTML。 I wrote this plunkr for you :

$('#animal').change(function () {
    var animalImages = pictureList[$(this).val() - 1];

    $('#slider').html('');
    for (var i = 0; i < animalImages.length; i++) {
      $('#slider').append('<li><img class="imageClass" src="' + animalImages[i] + '" /></li>');
    }
});

我没有运行