I would like to populate the TYPE selection drop down list when a
selection is made from the YEAR drop down list. I have not been able
to get the YEAR list populated.
function()
This appears to be a function declaration without a name, so that's a
syntax error. Based on your markup below, I think you meant:
function Change()
However, it is a convention that functions starting with capital
letters are intended to be called as constructors, it doesn't seem
like this function is meant to be called that way. Also, the name
should be descriptive. Seeing as how you have another function called
addOption, perhaps:
function appendOption() {}
would suit.
{
if(document.drop_list.YEAR.value == 'house')
There is no element with a name or id of "drop_list" in your posted
markup, presumably that is the name or id of the enclosing form. It is
more robust to use something like:
var form = document.drop_list;
// do stuff with the form
however since the function is called by a handler on an element in the
form, it is simpler to pass a reference directly from the listener
(see below)
{
addOption(document.drop_list.TYPE, "West", "West");
Where is addOption defined? Presumablly it's something like:
function addOption(el, text, value) {
el.options[el.options.length] = new Option(text, value);
}
Which makes me wonder why you'd bother with such a function.
TYPE is a bad choice for a form element name, since some form controls
(including select) have a type attribute and their DOM equivalents
have a (case sensitive) type property. Consider changing the name to
something more appropriate.
}
}
<select Name="YEAR" onchange=Change();>
Attribute values can be left unquoted, but it is a good idea to always
quote them, especially if their value is javascript code as it is
here. Use a better name and pass a reference to the element:
<select ... onchange="appendOption(this);">
Note also that this will add an option every time that the value of
the select is changed to "house", the function probably only add (or
maybe you want lots of similar options).
<Option value="house">bird house</option>
<Option value="cat">cat</option>
Be careful with capitalisation of element names. It's not significant
in HTML, but you should make them either all lower case or all upper
case for clarity. The same goes for attribute names.
</select>
<select Name="TYPE">
<Option value=""></option>
</select>
Try this minimal example:
<script type="text/javascript">
function addOption(el, text, value) {
el.options[el.options.length] = new Option(text, value);
}
function appendOption(el) {
var form = el.form;
if(form.YEAR.value == 'house') {
addOption(form.TYPE, "West", "West");
}
}
</script>
<form action="">
<div>
<select name="YEAR" style="width: 100px;"
onchange="appendOption(this);">
<option value="house">bird house
<option value="cat">cat
</select>
<select name="TYPE" style="width: 100px;">
<option value=""></option>
</select>
</div>
</form>
