-1

Sorry for the poor titling. Basically what I want to do is the following:

I have a drop-down menu that has a couple selections in it, and I want to make a 'checklist' of sorts appear beneath it, with options dependant on what was selected in the drop-down.

So for example, if I selected "Water" from the drop-down menu, I would want the checklist that appears beneath it labeled "What kind?" to give me the options of Dasani, Aquafina, or Fiji. Likewise, if it I selected "Soda" from the drop-down menu, I would want the checklist to give me the options of Fanta, Coke, or Sprite.

Johnson Gale
  • 155
  • 1
  • 11

2 Answers2

2

If you create all of the checkbox menus (assuming you know them all), and initialize them as hidden, then you can create on OnChange event for the dropdown, and show the appropriate checkbox menu.

Chris Wissmach
  • 505
  • 4
  • 11
0

For your select menus, use the Jquery .change function to determine whether your select menu has changed.

$('#beverageSelect').change(function(){
    // Logic here
});

Inside the change function, have an if statement to determine the value of the selected drop-down. This will check if it was "water" or "soda" or whatever is going on.

Then, I would have hidden checkboxes in my view, and using javascript toggle the class that would un-hide those elements.

<div class="unhide-checkbox">
    <!-- Put checkbox for water here -->
</div>

<div class="unhide-checkbox">
    <!-- Put checkbox for soda here -->
</div>

That .unhide-checkbox class has a "display:none;" attribute, so when toggled it will display/hide your information.

Community
  • 1
  • 1
Chase
  • 137
  • 1
  • 13