restoration_me (restoration_me) wrote in htmlnazis,

Drop Down Menus!!! AHHHH!!!


I'm using two drop down menus. The user selects an option from the first one, and based on their selection the second drop down menu gets populated with items. As it stands right now, each drop down menu has its own submit button.

Here's the problem:

1. I don't want submit buttons! They are causing me grief and my project supervisor prefers not to have them. He wants to be able to select an item from the first list and upon click that item, populate the second drop down menu. No Submit Buttons!

2. I can't get the drop down menus to maintain the selected item. Each time I select one and click submit, the menu defaults and displays the first item in the list. This is no good unless you're choosing the first item :)

3. Apart from the drop down menus not displaying the selected item, when I click submit it also swipes any info I have displayed on the page. To better explain, when you select from the first drop down menu your selection appears merely as a label below it. A simple text display. But when I make the second drop down menu selection and click submit, my nice little label telling me what I first selected get's deleted from the screen.

So those are my problems. I would have thought being able to fix this would be simple but even Google isnt heling me too much...urgh.

Anyway, I hope someone can help :)

  • Post a new comment


    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
what you need is some JavaScript. No, I do not know it well enough to help you do it.
1: Javascript. Use an onchange event handler for the first select that either submits the form or uses XMLHttpRequest to populate the second select. You could also have the handler populate it based on a dictionary or something, but I would suggest against it.

2: Use the selected attribute on the option you want selected. For instance, suppose you have 3 options and they selected the third, when you send the response the select should look something like this..
<select name="whatever">
  <option>Option 1</option>
  <option>Option 2</option>
  <option selected="selected">Option 3</option>

3: You need to maintain state on the server side and send the form back to the client with all of the values filled in the html.