Dynamic Select Menu With Javascript
OK, so I promised I'd write something about how to dynamically change parts of a web form using javascript. As an example, I'm going to change the options on an HTML select menu based on which radio button a user selects. Do to the fact that it is spring and I'm anxious to plan a vacation, I decided that my example should be travel-related. So what I'm going to do is show you how to present two radio button options to your user asking them if they'd prefer a domestic vacation or a vacation abroad. Then, depending on which radio button they select, the options of destinations which change.
First I'll show you the code that goes in your header and then I'll show you the code that goes in the body section of your page. After both code blocks, I'll explain what's happening.
This code goes in the header of the page:
This code goes in the body of the page:
Explanation
The code in the body section of the page is an HTML form with two radio buttons and one selection menu. When either radio button is clicked, it calls the function that is written in the header and passes the function its value (in this case, it's either passing the function a value of '1' if the abroad button is clicked or '2' if the domestic button is clicked.) The statements in the function then set the values and text of the options list depending on which value it receives.
So, starting with the form. The first line is the opening form tag containing three form attributes: action, method and name. The action is the address of where to send the form-data when a form is submitted. Since this is just an example, I just put a generic web page down. Usually it would be sent to a form processing page. The method is how the form is sent, either by "post" or "get" method. The name is the name of the form. So this form is submitting its data to a page on my site called dynamic-option-list.html via the post method and the name of the form is "travel".
The next few lines create the two radio buttons. They are part of the same set, so they have the same name attribute: type. The first one has an initial value of 1. It is set to be initially checked when the page first opens. It also uses the "onclick" event, which performs whatever action is in the quotes when a mouse is clicked on that object. In this case, when the mouse clicks either radio button, the onclick event calls the function named ChangeOptions() and passes it its value. So if a user clicks the second button, the onclick event calls the ChangeOptions function and passes it a value of "2".
What type of travel destination would you prefer?
Abroad
Domestic
The function is declared in the header inside of script tags. The function is named "ChangeOptions" and receives the value from the element that called the function. In this case, let's pretend a user clicked the second radio button. That button has a value of 2, so when it is clicked, the onclick event calls the ChangeOptions function, which receives the button's value of 2.
function ChangeOptions(ElementValue)
The statements inside of the function's brackets then check to see if the value is 1 or 2 and sets the values and text of the selection menu's options accordingly. It uses the javascript "with" statement, which basically allows you to write less code. We could write code for each option that basically says, "If the value is 1, then set the text on the element named "optionList" of the form named "travel". Instead, we're using the "with" statement to say, "In all instances contained within these brackets, we're referring to the form named travel....so please don't make me repeat it each time." Document refers to the web page itself.
The "if" statement grabs the value received by the function (in this example 2) and says, if the value is equal to 2, then do these following statements. optionList [0] refers to the first option (originally "Australia") and sets its text to "California" and changes its value to 0. The options are basically an array that can be identified by an index number starting with 0. So the first option has an index of 0, the next option has an index of 1, etc.
{
with (document.forms.travel)
{
if (ElementValue == 1)
{
optionList [0].text = "Australia"
optionList [0].value = 1
optionList [1].text = "South America"
optionList [1].value = 2
optionList [2].text = "Europe"
optionList [2].value = 3
}
if (ElementValue == 2)
{
optionList [0].text = "California"
optionList [0].value = 0
optionList [1].text = "Florida"
optionList [1].value = 1
optionList [2].text = "New York"
optionList [2].value = 2
}
}
}