Dynamic Dropdowns

[brijazz]

I’m working through the guide at https://css-tricks.com/dynamic-dropdowns/ I’ve taken the text file option, since I don’t need to worry about scaling or reusing the data elsewhere.

I’m struggling to find a way to add a third dropdown menu that becomes populated based on the result of the second dropdown. For example:

Dropdown 1: options are “Beverages” and “Snacks”; user selects “Beverages”
Dropdown 2: options are “Coffee” and “Coke”; user selects “Coke”
Dropdown 3: options are “Coke”, “Diet Coke” and “Cherry Coke”

I’ve got the first two working, just by following the guide. I’ve added the third to my markup but don’t know how to get it to populate. Any thoughts as to how to get it working?

[Paulie_D]

Where are you now….do you have a demo?

I’m no JS/JQ expert (barely a beginner) but it seesm to me you need to wrap in another function.

Or perhaps even separate them out.

$("#first-choice").change(function() {
   $("#second-choice").load("textdata/" + $(this).val() + ".txt");
});

$("#second-choice").change(function() {
   $("#third-choice").load("textdata/" + $(this).val() + ".txt");
});

[brijazz]

I implemented your suggestion… perhaps the problem is in the markup? Pardon my ignorance here; I’m a music teacher trying to put up a basic scheduling tool for my students and learning as I go :) Here’s my site: http://www.keynotemusicstudio.ca/DynamicDropdown/

And my markup:

        <select id="text-one">
        <option selected value="base">Please Select</option>
        <option value="piano">Piano</option>
        <option value="guitar">Guitar</option>
    </select>

  <br />

<select id="text-two">
    <option>(choose an instrument above)</option>
</select>

<br />

<select id="text-three">
    <option>(choose a lesson day above)</option>
</select>

[Paulie_D]

A Demo in Codepen is prefferable.

It’s hard to test and run JS on a remote page.

As I said, I’m no JS/JQ expert…I can fumble my way around it but not without a demo of some kind that I can actually change / experiment with.

[I.m.learning]

If I understand this; you still need to create a third list in the Jquery.

I made something similar; but placed my options in the button I used. When looking at your page, it stops after the second selection.

You could try this:

Add another Jquery:

                        $("#text-three").change(function() {
                $("#text-three").show();            
                $("#text-three").load("textdata/" + $(this).val() + ".txt");
            });

The last option displays the chosen item and stops the dropdowns.

I’m still new myself; but I made something similar; without multiple dropdowns and just places all my options inside the HTML and not a separate sheet.

[Author]

Posts