Multiple search fields using drop down menus

Report · Jul 16, 2018

Hi everyone,

I am trying to create a simple order form that needs to include multiple search fields.

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.

The second drop down menu would/could be different for each hat style. The options that appear in the second drop down menu are dependent on which hat you choose.

This is standard procedure for most order forms. Any help on how to make this work would be appreciated. Even a pre-existing order form template would suffice.

Thanks.

Mark

Report · Jul 16, 2018

In its simplest form (without a database see code below). If you have dozens of hats with dozens of colors then really the only way is to store the information is in a database, for easy management.

<!DOCTYPE html>

<head>

<title>Hat Choice</title>

crossorigin="anonymous"></script>

$(document).ready(function(){

$('.hat_colors').hide();

$('.hat_option').change(function(){

let hat_option = $('.hat_option').val();

if(hat_option === "Small") {

$('.hat_colors').show().html(

'<option value="" selected>Select Color</option>' +

'<option value="Pink">Pink</option>' +

'<option value="Red">Red</option>' +

'<option value="Green">Green</option>'

)

}

if(hat_option === "Medium") {

$('.hat_colors').show().html(

'<option value="" selected>Select Color</option>' +

'<option value="Orange">Orange</option>' +

'<option value="Mauve">Mauve</option>' +

'<option value="Black">Black</option>'

)

}

if(hat_option === "Large") {

$('.hat_colors').show().html(

'<option value="" selected>Select Color</option>' +

'<option value="Violet">Violet</option>' +

'<option value="Grey">Grey</option>' +

'<option value="Brown">Brown</option>'

)

}

});

</script>

</head>

<body>

<option value="" selected>Select Option</option>

<option value="Small">Small</option>

<option value="Medium">Medium</option>

<option value="Large">Large</option>

</select>

</body>

</html>

You could also use the jquery load function to keep the code a bit more managable if you are trying to do this using a non-database workflow. You would create seperate html files with the color options related to each hat and load the file based on which hat option was chosen

$(document).ready(function(){

$('.hat_colors').hide();

$('.hat_option').change(function(){

let hat_option = $('.hat_option').val();

if(hat_option === "Small") {

$('.hat_colors').show().load('small_color_options.html')

}

if(hat_option === "Medium") {

$('.hat_colors').show().load('medium_color_options.html')

}

if(hat_option === "Large") {

$('.hat_colors').show().load('large_color_options.html')

}

});

</script>

So for example in 'small_color_options.html' you would have the below code:

<option value="" selected>Select Option</option>

<option value="Green">Green</option>

Report · Jul 16, 2018

Hi, thanks so much for your help. Your first example looks the best because there will not be a database. Seems simple enough, will give it a try.

Report · Jun 12, 2019

Hi,

A while back you were kind enough to help me with a form script, which I'm just putting together believe it or not. I have the form set up here, Bolsas de Panama I just can't get it to work unfortunately, as simple as it is.

The visitor first selects one of the four bag types (medium, large, xlarge and mochilla). The next pull down menu (bag color) should show the different colors available for the bag type selected. That's it. I've adjusted the script you provided to reflect the different bag types and styles, but nothing appears in the second pull down menu.

Any help you can provide would be very much appreciated. I don't know if it's an error with the script or html.

Thanks.

Mark

Report · Jun 12, 2019

A few things which are incorrect. The corrected script is below but I'll explain.

Make sure your option value names in the select menu are exactly the same as the variables in the script.

So - bag_option === "Mediana" in the script requires the option value in the select list to be Mediana NOT mediana as you current have it. Update all the other values in your select list to match the variable names in the script as shown below:

<option value="selecionar">Selecionar</option>

<option value="Mediana">Mediana</option>

<option value="Grande">Grande</option>

<option value="X_Grande">X-Grande</option>

<option value="Mochilla">Mochilla</option>

</select>

In the script itself you are assigning the select list option value to 'hat_option' instead of 'bag_option'

so if(hat_option === "Mediana") should be if(bag_option === "Mediana")

I've correct the script below, so all you have to do is copy and replace the old script you currently have.

$(document).ready(function(){

$('.bag_option').change(function(){

var bag_option = $('.bag_option').val();

alert(bag_option);

if(bag_option === "Mediana") {

$('.bag_colors').show().html(

'<option value="" selected>Select Color</option>' +

'<option value="Amarillo">Amarillo</option>' +

'<option value="Azul Marino">Azul Marino</option>' +

'<option value="Azul Royal">Azul Royal</option>' +

'<option value="Blanco>Blanco</option>' +

'<option value="Fuscia>Fuscia</option>' +

'<option value="Limon>Limon</option>' +

'<option value="Morada">Morada</option>' +

'<option value="Naranja">Naranja</option>' +

'<option value="Negro">Negro</option>' +

'<option value="Rojo">Rojo</option>' +

'<option value="Rosada>Rosada</option>'

)

}

if(bag_option === "Grande") {

$('.bag_colors').show().html(

'<option value="" selected>Select Color</option>' +

'<option value="Amarillo">Amarillo</option>' +

'<option value="Azul Marino">Azul Marino</option>' +

'<option value="Azul Royal">Azul Royal</option>' +

'<option value="Blanco>Blanco</option>' +

'<option value="Morada">Morada</option>' +

'<option value="Naranja">Naranja</option>' +

'<option value="Negro">Negro</option>' +

'<option value="Rojo">Rojo</option>' +

'<option value="Turquesa>Turquesa</option>' +

'<option value="Verde>Verde</option>'

)

}

if(bag_option === "X_Grande") {

$('.bag_colors').show().html(

'<option value="" selected>Select Color</option>' +

'<option value="Amarillo">Amarillo</option>' +

'<option value="Azul Marino">Azul Marino</option>' +

'<option value="Azul Royal">Azul Royal</option>' +

'<option value="Blanco>Blanco</option>' +

'<option value="Morada">Morada</option>' +

'<option value="Naranja">Naranja</option>' +

'<option value="Negro">Negro</option>' +

'<option value="Rojo">Rojo</option>' +

'<option value="Turquesa>Turquesa</option>' +

'<option value="Verde>Verde</option>'

)

}

if(bag_option === "Mochilla") {

$('.bag_colors').show().html(

'<option value="" selected>Select Color</option>' +

'<option value="Amarillo">Amarillo</option>' +

'<option value="Azul Marino">Azul Marino</option>' +

'<option value="Azul Royal">Azul Royal</option>' +

'<option value="Blanco>Blanco</option>' +

'<option value="Naranja">Naranja</option>' +

'<option value="Rojo">Rojo</option>' +

'<option value="Verde">Verde</option>'

)

}

});

</script>

Report · Jun 12, 2019

Just get rid of

alert(bag_option);

on the 4th line of the script. I just used it to test the function was working.

Report · Jun 12, 2019

Thanks so much for your help, it seems to be working just fine.

Two quick things.

1) are scripts like this normally embedded on the same page as the form or are they saved to a separate file and linked to in the <head> section? I see a lot a js scripts linked to external files, is one method better than the other?

2) if I wanted to add an additional item - say t-shirts - to the form, can I assume that everything in the script that comes after the coding below can just be copied and modified with the new data? Is there anything else I would have to do?

$(document).ready(function(){

Thanks again.

Kind regards,

Mark

Report · Jun 12, 2019

https://forums.adobe.com/people/Fun+Seeker wrote
1) are scripts like this normally embedded on the same page as the form or are they saved to a separate file and linked to in the <head> section? I see a lot a js scripts linked to external files, is one method better than the other?

No. You would normally link a <script src="nameOfScript.js"></script> to the page, in the <head> section or just before the closing </body> tag, make sure the link to the jquery library comes first, before the link to the script.

https://forums.adobe.com/people/Fun+Seeker wrote
2) if I wanted to add an additional item - say t-shirts - to the form, can I assume that everything in the script that comes after the coding below can just be copied and modified with the new data? Is there anything else I would have to do?
$(document).ready(function(){

Yes. You can create a new document ready block if you want, it might make life easier.

$(document).ready(function(){

});

This kind of approach is only good for a few items, as you can see the code is getting a bit bloated with all the <option></option> tags.

Its the easiest way for you to get something working as its visually quite simple to understand but normally I would get the information from a database or in the case of a few items I would use javascript arrays and loop through the arrays, which makes the code very streamlined.

Report · Jun 13, 2019

Thanks so much for everything. I'll have to leave those javascript arrays for another day:)

Report · Jun 13, 2019

https://forums.adobe.com/people/Fun+Seeker wrote
Thanks so much for everything. I'll have to leave those javascript arrays for another day:)

Yes ok. Sometimes a solution is simpler to understand even though the code is more obtuse than is necessary

WolfShade posted a more compact/streamlined solution in Post 3 and is how I would recommend doing it, or similar, although these days I tend to use vue.js, a javascript framework, which makes the process even easier.

Post back if you get stuck along the way.

Report · Jul 16, 2018

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 16, 2018

Hi Nancy, thanks for responding. Actually, there is no shopping cart, only a form. I used the hat example for illustrative purposes only. I was looking for a way to have drop down menus work together, and this script is perfect.

For example, let's say you have a school and offer classes on a variety of different subjects, each with multiple start dates. In the first menu you select the subject, and then use the second menu to select from the different start dates. This sort of thing.

I'm sure it could be used on an online order form as well, but as you mentioned, most shopping cart software already provides for this.

Thanks.

Report · Jul 16, 2018

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,

^ _ ^

Report · Jul 16, 2018

Hi Wolfshade, that's for offering the script but no database will be used. That, I'm afraid, is still way over my head.

Thanks.

Report · Jul 16, 2018

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

Report · Jul 16, 2018

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Multiple search fields using drop down menus

1 Correct answer

Photos