Multiple search fields using drop down menus

I tend to agree with @osgood_ in this. I feel that using dependant dropdown lists is confusing for the casual user, although I do tend to use it for the Admin part of a website. But this is because the Admin is used to the system.

As an example, see https://cobbcoleatherhats.com/product-lines.php

https://forums.adobe.com/people/Fun+Seeker  wrote For example, let's say your selling hats. The first drop down menu allows you to select your hat of choice. The second drop down menu, based on the hat you selected, will show those colors or sizes available.

Not really.

The first drop down or list of links would normally take you to another page listing the range of hats available in that category:

Dress hats >

Party Hats >

Winter Hats >

Dress Hats Available

Dress Hat 1

Image - click for details

Dress Hat 2

Image - click for details

Dress Hat 3

Image - click for details

Dress Hat 1 Details

Description: Blah Blah

Colors Avaliable:

Red

Green

Blue

Sizes Available:

Small

Medium

Large

Price

$14.25

Add to Cart

Here is a vanilla JavaScript example that can be modified for use with a database:

<select id="hats" name="hats">
    <option value="">SELECT</option>
    <option value="tophat">Top Hat</option>
    <option value="woolcap">Wool Cap</option>
    <option value="visor">Visor</option>
</select>
<select id="color" name="color"></select>
<script>
    var topHatColorsVal = ['red','blue','white','green'],
        woolCapColorsVal = ['brown','tan','darkblue'],
        visorColorsVal = ['green','darkblue','red','yellow'];

    var topHatColorsTxt = ['Red','Blue','White','Green'],
        woolCapColorsTxt = ['Brown','Tan','Dark Blue'],
        visorColorsTxt = ['Green','Dark Blue','Red','Yellow'];

    var hats = document.getElementById('hats'),
        color = document.getElementById('color');
    hats.addEventListener('change',changeColors);
    function changeColors(){
        var colors = color.options.length;
        if(colors >= 0){
            for(x=colors;x>0;x--){
                color.remove(x-1);
                }
            }
        color.add(new Option('Choose',''));
        switch(hats.value){
            case 'tophat':
                for(i=0;i<topHatColorsVal.length;i++){
                    color.add(new Option(topHatColorsTxt,topHatColorsVal));
                    }
            break;
            case 'woolcap':
                for(i=0;i<woolCapColorsVal.length;i++){
                    color.add(new Option(woolCapColorsTxt,woolCapColorsVal));
                    }
            break;
            case 'visor':
                for(i=0;i<visorColorsVal.length;i++){
                    color.add(new Option(visorColorsTxt,visorColorsVal));
                    }
            break;
            }
        }
</script>

HTH,

^ _ ^

Your shopping cart system should be able to handle product variables.  Which cart are you using?