Display image array based on selection

Question

I am trying to accomplish the following....

Create a dropdown menu that is a list of last names
When a last name is selected, display all of the images with that last name

Attempt...

<script>
    function displayAllImages() {
        var smith = ["text instead of Smith pictures","text instead of Smith pictures2"];
        var jones = ["text instead of Jones pictures"];

        for (i=0;i<2;i++) {
          document.write("<li><p>" + smith[i] + "<p/></li>");
        }
    };
</script>
<select>
  <option value="smith">Smith</option>
  <option value="jones">Jones</option>
</select> 
<div>
    <ul>
        <script>displayAllImages();</script>
    </ul>
</div>

What I need help with is relaying the dropdown selection to the the javascript function so I can switch between arrays.

Thank you!

Are you expecting to show all images that match the selected value or that contain the selected value? — sbeliv01
– sbeliv01, Commented Feb 1, 2016 at 20:41
Pro-tip: don't use document.write. It will ruin your life. — Mike Cluck
– Mike Cluck, Commented Feb 1, 2016 at 20:41
This is just a simple example, but I will have arrays of image paths, and when a dropdown is selected, that corresponding array name will display all of the elements — nickruggiero
– nickruggiero, Commented Feb 1, 2016 at 20:42
Can you post your real array of image paths?. We need to see the real issue that you have. — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Feb 1, 2016 at 20:47

Zakaria Acharki · Accepted Answer · 2016-02-01 20:48:23Z

4

Use on change event to capture the changes in you select and append the lis items to the target ul using the related array to the selected value.

NOTE : Using window[string] in the example bellow to get the variable name from string (selected option value).

var smith = ["text instead of Smith pictures","text instead of Smith pictures2"];
var jones = ["text instead of Jones pictures"];

$('select').on('change', function(){
    $('ul').empty(); //reset ul
  
    var selected_array = window[$(this).val()];

    for (i=0;i<selected_array.length;i++) {
      $('ul').append("<li><p>" + selected_array[i] + "<p/></li>");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="smith">Smith</option>
  <option value="jones">Jones</option>
</select> 
<div>
  <ul></ul>
</div>

answered Feb 1, 2016 at 20:48

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nickruggiero Over a year ago

@ZakariaAcharki I can't get this to run locally or on JSFiddle, am I missing something? jsfiddle.net/exdu0572

Zakaria Acharki Over a year ago

JsFiddle don't support window[] so it will not work ( you're missing also to include jquery library).

nickruggiero Over a year ago

Would window[] work locally? what is the alternative

nickruggiero Over a year ago

Thanks, eval works in jsfiddle, but im having trouble locally. I will mess around with it, thank you

gaetanoM · Accepted Answer · 2016-02-01 21:03:47Z

A different approach all in javascript can be:

function displayAllImages(ele) {
  var smith = ["text instead of Smith pictures","text instead of Smith pictures2"];
  var jones = ["text instead of Jones pictures"];

  var obj = jones;
  var target = document.getElementsByClassName('target')[0];
  target.innerHTML = '';
  if (ele.selectedOptions[0].value == 'smith') {
    obj = smith;
  }
  obj.forEach(function(currValue, index, arr) {
    target.innerHTML += "<li><p>" + currValue + "</p></li>";
  });
};
window.onload = function(e) {
  displayAllImages(document.getElementById('selectBox'));
}

<select id="selectBox" onchange="displayAllImages(this);">
    <option value="smith">Smith</option>
    <option value="jones">Jones</option>
</select>
<div>
    <ul class='target'>
    </ul>
</div>

AsgarAli · Accepted Answer · 2016-02-01 21:18:37Z

var arrAllImages = [];
arrAllImages["smith"] =
        [
            "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg",
            "http://farm7.static.flickr.com/6050/6287299751_395316b6cd_z.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Sample-image.svg/703px-Sample-image.svg.png"
        ];
arrAllImages["jones"] =
        [
            "http://yesyoucanbuythat.com/store/resources/image/18/7a/f.png",
            "http://www.claridgeupholstery.com/images/samples/Beige.jpg",
            "http://www.quality-wars.com/wp-content/uploads/2009/10/gold_standard_main.jpg"
        ];
function displayUserImages() {
    $("li").remove();
    var strUserName = $("select").val();
    $.each(arrAllImages[strUserName], function () {
        $("<li><img src='" + this + "'/></li>").appendTo("ul");
    });
}
$(document).ready(function () {
    displayUserImages();

    $("select").change(function () {
        displayUserImages();
    });
})

li
{
    list-style: none ;
    display: inline
}
li img{
    height: 150px;
    width: 150px;
    margin-right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <select>
        <option value="smith">Smith</option>
        <option value="jones">Jones</option>
    </select>
    <div>
        <ul></ul>
    </div>
</body>

Collectives™ on Stack Overflow

Display image array based on selection

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related