I'm trying to implement dynamic select boxes by using onchange. The ultimate goal is to create a series of select boxes that vary based on what is chosen in the previous select. For some reason, the onchange isn't firing. Here is the definition for the first select in the chain:
<select name='firstDrop' onchange='handleSelects(window.document.builder.firstDrop.options[selectedIndex].text);'>
For some reason the javascript function (defined in an exernal file) is never called. Any ideas?
Arguments are not passed in function calls in the usual way in on-event attributes. There can't be anything in the parentheses after the function name.
Remember that this part is HTML, not JavaScript. The rules are different.
Also, the syntax is different, because the language must be identified. Example:
onclick="JavaScript:calcalot()"I know this example works.
The following part means absolutely NOTHING in the HTML part of a web page:
window.document.builder.firstDrop.options[selectedIndex].textThis causes errors in the HTML parsing. You have to place this object inside the JavaScript code, not in the HTML code. Also, selectedIndex is undefined.
Also, don't use HTML comments to hide JavaScript. It causes errors in newer browsers. Use a separate file.
OK that makes sense, thanks (first time JS). However, I still can't make anything happen. Here is the new select definition:
<select name='firstDrop' onclick='javascript:handleSelects()'>
Then, I have an external javascript file defined in the <head> section as follows:
<script type="text/javascript" src="functions.js"></script>
And within that file is the function being called:
function handleSelects()
{
alert ("Test");
}
I notice that I don't actually see the above function when I view source in the browser - just the call to the external file. Should I see more?
Any further ideas?
That is correct. The JS file is not part of the source being rendered.
OK. Can anyone point me to how you would handle chained select boxes?
A simple script to give you something to chew on:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function doChange(srcE, targetId)
{
var val = srcE.options[srcE.selectedIndex].value;
var targetE = document.getElementById(targetId);
alert(val);
removeAll(targetE);
if(val == 'languages')
{
addOption('C++', targetE);
addOption('Java', targetE);
addOption('Scheme', targetE);
}
else if(val == 'tools')
{
addOption('Visual Studio', targetE);
addOption('Netbeans', targetE);
addOption('Eclipse', targetE);
}
}
function addOption(value, e)
{
var o = new Option(value);
try
{
e.add(o);
}
catch(ee)
{
e.add(o, null);
}
}
function removeAll(e)
{
for(var i = 0, limit = e.options.length; i < limit - 1; ++i)
{
e.remove(1);
}
}
</script>
</head>
<body>
<form action="#">
<select name="selOne" id="selOne" onchange="doChange(this, 'selTwo')">
<option value="default">---Select Something---</option>
<option value="languages">Languages</option>
<option value="tools">Tools</option>
</select>
<select name="selTwo" id="selTwo">
<option value="default">---Select Something---</option>
</select>
</form>
</body>
</html>Thanks for the help. I had an array definition after the alert, and this is what was killing everything. Once I took it out, no problem. I guess defining arrays correctly is desirable....
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.