Click here to Skip to main content
15,440,014 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am trying to display a specific image from different types of links using a dropdown option.

What I want to do:
I have six different types of links. These links needs to be added into a dropdown option. After the desired Option (category) is chosen from a dropdown, a Textbox will appear. In the textbox I want to write specific image name. For example 1,2,3,4,5,6,7,8, etc... then the desired image will be displayed below one at a time.

Category-3 has Image folder instead of an image, so I was thinking maybe something like this, but still haven't been able to create a function to do this.

JavaScript
let folder = 'images';
if (selectType == 3) folder = 'Images';
'data-src',
`www.example.com/Category+${selectType}/${folder}/${val}.png`

www.example.com/Category-3/Images/8.png
www.example.com/Category-4/images/3.png
www.example.com/Category-5/images/5.png
www.example.com/Category-6/images/4.png
www.example.com/Category-7/images/7.png
www.example.com/Category-8/images/11.png

I need a some sort of JavaScript function to do this. I did some research and still haven't figured it out.

If it's possible to create some type of function that performs the above I would really appreciate that.

The code below displays images from only the chosen URL and images keep appearing one after another (stacking). I need to display one image at a time for example when displaying 2.png but when changing 2.png to 5.png then 2.png will be replaced by 5.png.

Thank you for reading!

What I have tried:

HTML
<html>
<body>
<div class="col-md-4"><br>
  <span>Please Choose desired Category</span>
  <select class="SelectType">
    <option value="3">Category-3</option>
    <option value="4">Category-4</option>
    <option value="5">Category-5</option>
    <option value="6">Category-6</option>
    <option value="7">Category-7</option>
    <option value="8">Category-8</option>
  </select>
</div>
<form>
   Image ID: <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
</form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var val = document.getElementById('imagename').value,
                src = 'www.example.com/Category-3/Images/' + val +'.png',
                img = document.createElement('img');
                img.src = src;
				img.setAttribute('width', '190px');
				img.setAttribute('height', '190px');
                document.body.appendChild(img);
        }
    </script>
</body>
</html>
Posted
Updated 3-Feb-22 10:43am
v9

1 solution

I think you've got most of the work done there, you just seem to be missing the part of the logic where you get the value from the select box which you can do using the following:

JavaScript
# HTML
<select id="image-category">
 <option>...</option>
</select>

# JS
const select = document.getElementById('image-category');
const option = select.options[select.selectedIndex];
const val = document.getElementById('imagename').value;
const images = option.value == '8' ? 'Images' : 'images';

const path = `www.example.com/Category-${option.value}/${images}/{$val}.png`;
 
Share this answer
 
Comments
PuppyDude 3-Feb-22 5:30am    
Hello! thanks for replying! Could you please elaborate little bit? How do I insert script you wrote above? Could you make it full script I couldn't seem to be able to write it I'm kind of learning JavaScript newbie here.
Chris Copeland 3-Feb-22 6:05am     CRLF
I've created a JS Fiddle and added some comments in there to describe the process. Essentially we get a reference to the <select> element, then get the selected option and we can use that option to build the URL.
PuppyDude 3-Feb-22 6:23am    
Wow! Thanks mate!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900