I want dropdown menu to display right values

[carlbrooks]

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:

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:

<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>

[Airshow]

Carl,

I haven't got time to give a full answer but here are some pointers:

• The current value of your first select element is given by optionDrop[0][optionDrop[0].selectedIndex].value .
• Select elements are display:inline by default so, unless you specifically want "block", use numberDrop[0].style.display = "inline"; .
• Dynamically manipulating a select element's options is problematic in some versions of some browsers so you may find it better to show/hide three(?) variants of the second menu.

Airshow