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!

Answer 1

Use on change event to capture the changes in you select and append the li s 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>

Answer 2

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>

Answer 3

 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>

Display image array based on selection

Question

3 answers

solution1
4 ACCPTED 2016-02-01 20:48:23

solution2
2 2016-02-01 21:03:47

solution3
1 2016-02-01 21:18:37

Display image array based on selection

Question

3 answers

solution1 4 ACCPTED 2016-02-01 20:48:23

solution2 2 2016-02-01 21:03:47

solution3 1 2016-02-01 21:18:37

solution1
4 ACCPTED 2016-02-01 20:48:23

solution2
2 2016-02-01 21:03:47

solution3
1 2016-02-01 21:18:37