SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I want dropdown menu to display right values

    I have two dropdown menus.

    1st -> Drop Down Menu (name="optionDrop") has 5 values which are "ABC", "ABCD", "ABCDE", "True or False" and "Yes or No".
    2nd -> Drop Down Menu (name="numberDrop") has 5 values which are "","1", "2", "3" and "4".

    Now this is what I want to achieve:

    • If user select "ABC" from "optionDrop", then only display options "", "1" and "2"
    • If user select "ABCD" from "optionDrop", then only display options "", "1", "2" and "3"
    • If user select "ABCDE" from "optionDrop", then only display options "", "1", "2", "3" and "4"
    • If user select "True or False" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part)
    • If user select "Yes or No" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part)


    Does anyone know how this can be done and implemented in the javascript code I have?

    Below is Javascript Code:

    Code:
     function getDropDown() {
             var optionDrop = document.getElementsByName("optionDrop");
            var na = document.getElementById("na");
            var numberDrop = document.getElementsByName("numberDrop");
            var answerA = document.getElementById("answerA");
            var answerB = document.getElementById("answerB");
            var answerC = document.getElementById("answerC");
            var answerD = document.getElementById("answerD");
            var answerE = document.getElementById("answerE");
            var answerTrue = document.getElementById("answerTrue");
            var answerFalse = document.getElementById("answerFalse");
            var answerYes = document.getElementById("answerYes");
            var answerNo = document.getElementById("answerNo");
            
        if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
    					numberDrop[0].style.display = "block";
    					na.style.display = "none";
    		
        }else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){			
    	    			numberDrop[0].style.display = "none";
    	    			na.style.display = "block";            
                
                }
                }
    Htrml code:

    Code:
    <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
    <table id="middleDetails" border="1">
    <tr>
        <td>Question:</td> 
        <td rowspan="3">
            <textarea rows="5" cols="40" name="questionText"></textarea>
        </td>
        <td>Option Type:</td> 
        <td>
            <select name="optionDrop" onClick="getDropDown()">
    <option value="">Please Select</option>
    <option value="abc">ABC</option>
    <option value="abcd">ABCD</option>
    <option value="abcde">ABCDE</option>
    <option value="trueorfalse">True or False</option>
    <option value="yesorno">Yes or No</option>
    </select>
        </td>
    <tr>
    <td colspan="2"></td>
    <td>Number of Answers:</td>
    <td>
    <span id="na">N/A</span>
    <select name="numberDrop" id="numberDropId" onChange="getButtons()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </td>
    </tr>
    </table>
    </form>

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by carlbrooks View Post
    Does anyone know how this can be done and implemented in the javascript code I have?
    One option:

    By default, don't display any options in numberDrop.

    Then in your onchange event handler for optionDrop you could have a switch block. Then have a case block in your switch block for each value in optionDrop which uses "new Option()" to create the options you want to display in numberDrop or to show/hide anything else. On each call to the event handler you will first need to delete any current options in numberDrop.


Bookmarks

Posting Permissions

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