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"]
];

我无法创建一个脚本，该脚本将从数组中提取图像并将其插入到一个图像列表中。例如，如果我选择＆＃34;动物1＆＃34;选项，我会得到

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

对于＆＃34;动物2＆＃34;

  <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

改写你要求的内容：

您需要选择一只动物，并在屏幕上打印与该动物相关的图像列表。

您只需获取所选动物的值并查询数组中的相应位置，然后使用该数组打印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>');
    }
});

我没有运行

Answer 2

您必须在2 D阵列上运行循环。你可以这样做：

for(var i = 0; i < pictureList.length; i++) {
    var picSecond = pictureList[i];
    for(var j = 0; j < picSecond.length; j++) {
        alert("picSecond[" + i + "][" + j + "] = " + picSecond[j]);
    }
}

在您的选择框上

，创建一个onChange事件并调用方法。所选选项的值应在onChange事件中传递。您可以通过轻松调整代码，使用上面的循环轻松地从数组中获取第n个元素。

现在，您可以创建一个方法来动态创建img标记，并将src属性作为数组中的picSecond [j]值。

Answer 3

这是您需要的javascript代码，你只需要jquery

pictureList[$( "#animal" ).val()].forEach(function(elm){
  $("#slider").append('<li><img class="imageClass" src="'+elm+'"/></li>')
});

Answer 4

您可以尝试这样：

function changeAnimal(val){

document.getElementById('slider').innerHTML = '';
if(val !== ''){

    for(i=0;i<pictureList[val-1].length;i++){

        var li = document.createElement('li');
        var img = document.createElement('img');
        img.src = pictureList[val-1][i];
        li.appendChild(img);            
        document.getElementById('slider').appendChild(li);
    }

}    
}

<强> FIDDLE EXAMPLE

Answer 5

我为您here创建了一个有效的JSFiddle。

的Javascript

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

var elem = document.getElementById("animal");
elem.onchange = function(){
    var slider = document.getElementById("slider");
    slider.innerHTML = "";
    var val = elem.options[elem.selectedIndex].value;
    for (var key in pictureList[val-1]){
        var newItem = '<li><img class="imageClass" src="'+(pictureList[val-1][key])+'"/></li>';
        slider.innerHTML += newItem;
    }
};

HTML

<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>

<ul id="slider"></ul>

如何从数组中提取图像并放入内部列表

5 个答案: