"Can you please provide instructions on how to retrieve images from an array and insert

Question

"Can you please provide instructions on how to retrieve images from an array and insert

I have a dropdown list with animal options:

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

Furthermore, I have a 2-dimensional array containing image sources:

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

I need help creating a script to extract images from the array and combine them into a single image list. For example, if I select "animal 1," I want the following output:

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

For "animal 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>

javascript arrays list

Answer 1

Answer №1

To put your request in different words:

You will have to choose a single animal and display a list of images related to that specific animal on the screen.

Simply retrieve the selected animal's value, find its corresponding position in the array, and utilize that array to showcase the HTML content. Check out this plunkr I created for you: Link here:

$('#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>');
    }
});

I haven't tested the implementation yet.

Answer 2

To put your request in different words:

You will have to choose a single animal and display a list of images related to that specific animal on the screen.

Simply retrieve the selected animal's value, find its corresponding position in the array, and utilize that array to showcase the HTML content. Check out this plunkr I created for you: Link here:

$('#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>');
    }
});

I haven't tested the implementation yet.

Answer 3

Answer №2

To iterate over your 2D array, you will need to use a loop like the following:

for(var x = 0; x < imageArray.length; x++) {
    var row = imageArray[x];
    for(var y = 0; y < row.length; y++) {
        alert("imageArray[" + x + "][" + y + "] = " + row[y]);
    }
}

In your select box, set an onChange event to call a method that takes the selected option value as a parameter. By making some slight adjustments to the above loop code, you can easily retrieve the nth element from the array.

You can then create a function to dynamically generate img tags with src attributes based on the values in the imageArray.

Answer 4

To iterate over your 2D array, you will need to use a loop like the following:

for(var x = 0; x < imageArray.length; x++) {
    var row = imageArray[x];
    for(var y = 0; y < row.length; y++) {
        alert("imageArray[" + x + "][" + y + "] = " + row[y]);
    }
}

In your select box, set an onChange event to call a method that takes the selected option value as a parameter. By making some slight adjustments to the above loop code, you can easily retrieve the nth element from the array.

You can then create a function to dynamically generate img tags with src attributes based on the values in the imageArray.

Answer 5

Answer №3

Take a look at this essential javascript snippet, All that's required is jquery

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

Answer 6

Take a look at this essential javascript snippet, All that's required is jquery

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

Answer 7

Answer №4

Here is a sample code snippet for changing the animal displayed:

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

        for(var 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);

            slider.appendChild(li);
        }
    }  
}

Check out this JSFiddle example for reference.

Answer 8

Here is a sample code snippet for changing the animal displayed:

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

        for(var 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);

            slider.appendChild(li);
        }
    }  
}

Check out this JSFiddle example for reference.

Answer 9

Answer №5

Here is a JSFiddle I put together for you click here.

Javascript

var imageGallery = [
    ["pictures/pic1.jpg","pictures/pic2.jpg"],
    ["pictures/pic3.jpg","pictures/pic4.jpg", "pictures/pic5.jpg"],
    ["pictures/pic6.jpg"]
];

var element = document.getElementById("animal");
element.onchange = function(){
    var slideShow = document.getElementById("slideshow");
    slideShow.innerHTML = "";
    var value = element.options[element.selectedIndex].value;
    for (var index in imageGallery[value-1]){
        var newSlide = '<li><img class="imageClass" src="'+(imageGallery[value-1][index])+'"/></li>';
        slideShow.innerHTML += newSlide;
    }
};

HTML

<select id="animal">
    <option>Select an animal</option>
    <option value="1">Animal 1</option>
    <option value="2">Animal 2</option>
    <option value="3">Animal 3</option>
</select>

<ul id="slideshow"></ul>

Answer 10

Here is a JSFiddle I put together for you click here.

Javascript

var imageGallery = [
    ["pictures/pic1.jpg","pictures/pic2.jpg"],
    ["pictures/pic3.jpg","pictures/pic4.jpg", "pictures/pic5.jpg"],
    ["pictures/pic6.jpg"]
];

var element = document.getElementById("animal");
element.onchange = function(){
    var slideShow = document.getElementById("slideshow");
    slideShow.innerHTML = "";
    var value = element.options[element.selectedIndex].value;
    for (var index in imageGallery[value-1]){
        var newSlide = '<li><img class="imageClass" src="'+(imageGallery[value-1][index])+'"/></li>';
        slideShow.innerHTML += newSlide;
    }
};

HTML

<select id="animal">
    <option>Select an animal</option>
    <option value="1">Animal 1</option>
    <option value="2">Animal 2</option>
    <option value="3">Animal 3</option>
</select>

<ul id="slideshow"></ul>

"Can you please provide instructions on how to retrieve images from an array and insert

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Error in NodeJS session: the variable "request" is not defined

I am encountering an issue where my JavaScript code is not being executed on my HTML page as expected. I

Set object keys dynamically using jQuery or pure JavaScript

Adding Elements to an Array Using a Form

Adding up column values in AngularJS arrays

What causes JavaScript to be unable to run functions inside other functions?

Stopping Angular.js $http requests within a bind() event

Is it possible to utilize PDF.js once the PDF file has been downloaded?

Solving the checkbox toggle challenge with recursive functions | Recursive checkbox challenge

HTML: Determine the Precise Location of a Div Element That is Centered

Creating synchronous behavior using promises in Javascript

Jquery not functioning properly for show and hide feature

Activate the drop-down menu in Angular 6 by hovering over it with your mouse

Is there a way to prevent pop-up windows from appearing when I click the arrow?

"jQuery's toggleClass Method for Efficient Class Swapping

Express (MEAN stack) does not update page URL when using res.location

To iterate through a multi-dimensional array

"Can you tell me more about the purpose of $cacheFactory

How do you include attachments in the body of form data using C# in a REST API?

Transferring data between AngularJS services situated on separate pages