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>