www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Trying to Make a Dynamic Drop Down Menu

  1. #1
    Join Date
    Jan 2013
    Posts
    2

    resolved [RESOLVED] Trying to Make a Dynamic Drop Down Menu

    I have a form which contains a drop down menu. I need to insert additional form elements (questions) depending on the choice in the menu. An example of the code with which I need help is as follows:

    Code:
    ...
    <script>
    
    function addElement() {
    
    if (document.getElementById("fruitchoice") == "fig") {
    
    var tbdy = document.getElementsByTagName("tbody");
    var menuchoice = document.getElementById("fruitchoice");
    
    newElement = document.createElement("p");
    newText = document.createTextNode("Why do you like figs?");
    newElement.appendChild(newText); 
    
    menuchoice.parentNode.insertBefore(newElement, fruitchoice.nextSibling);
    }}
    </script>
    
    <body>
    <form method=post id ="form1" name="form1">
    
    <select id="fruitchoice" onBlur="javascript:addElement()">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="fig">Fig</option>
    <option value="pear">Pear</option>
    </select>
    ...
    
    </form>
    </body>
    </html>
    When I test this code, I find that the value of the "fruitchoice" is undefined. I want to add the question about figs when the user chooses figs from the menu. I want the question not added when the user chooses another fruit.

    I have searched the web and cannot find an (understandable) explanation of how to capture the menu choice and use it in the javascript to insert the additional question. I am not even sure if it is possible.

    Thanks in advance for your help.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    comments embedded in script...

    Code:
    <script>
    
    function addElement(sel) {
    
    if (sel.value == "fig") { //you need to specify that you want the value, not just the element
    
    //var tbdy = document.getElementsByTagName("tbody");  //what does this do????
    //var menuchoice = document.getElementById("fruitchoice");  //we pass the select element to the function, so don't need this
    
    newElement = document.createElement("p");
    newText = document.createTextNode("Why do you like figs?");
    newElement.appendChild(newText); 
    
    sel.parentNode.insertBefore(newElement, sel.nextSibling);
    }}
    </script>
    
    <body>
    <form method=post id ="form1" name="form1">
    
    <select id="fruitchoice" onchange="addElement(this)">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="fig">Fig</option>
    <option value="pear">Pear</option>
    </select>
    ...
    
    </form>
    </body>
    although I suspect that you would be better off just making a div and adding to its innerHTML...

  3. #3
    Join Date
    Jan 2013
    Posts
    2
    Hi Xelawho,

    Your suggestion works perfectly! I am embarrassed that the solution was so simple. I had looked and found suggestions that involved jQuery, a format of 'options.[selectedIndex]', and others that I cannot describe.

    The 'getElementsByTagName' line is from my real life code. I use a table to layout the form for now; though I think I will use CSS in the final version of the program. It was an oversight to include that line in this example code.

    My expertise is business (accounting and finance), not computer programming. I am teaching myself programming, and this problem was a real challenge to me. I learned a lot from your straightforward solution. I plan to learn about the use of 'this' which I have not studied in depth yet. I think if I was more versed in its use, I would have considered more possibilities.

    Thank you again. I am marking this thread as solved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles