So, I have two cascading dropdowns, both displaying different images based on user selection. But now I need to restrict the number of images in the second dropdown based on the first dropdown value.

This is an example of how I did that with fonts: https://jsfiddle.net/gjq8ov1h/

But now, I want to do this with images, but I don't even know where to begin.

fyi, I have the first set of images in order like pic1.jpg, pic2.jpg, but the second set is numbered based on its dimensions. i can change rename them with num1, num2, etc. if needed.

I used these both functions to get the images:

var imageList = Array();

for (var i = 1; i <= 8; i++) {

imageList[i] = new Image();

imageList[i].src = "Images/image"+i+".jpg";

}

function switchImage() {

var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;

document.myImage.src = imageList[selectedImage].src;

}

And this for the second one:

function swapImage(){

var image = document.getElementById("imageToSwap");

var dropd = document.getElementById("dlist");

image.src = dropd.value;    
}

I really can't seem to figure it out. Would appreciate any help!