Dynamic Select Boxes

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:

For some reason the javascript function (defined in an exernal file) is never called. Any ideas?

bg370

Newbie Poster

8 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

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].text

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

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

4 Years Ago

OK that makes sense, thanks (first time JS). However, I still can't make anything happen. Here is the new select definition:

Then, I have an external javascript file defined in the section as follows:

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?

bg370

Newbie Poster

8 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

That is correct. The JS file is not part of the source being rendered.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

4 Years Ago

OK. Can anyone point me to how you would handle chained select boxes?

bg370

Newbie Poster

8 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

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>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

4 Years Ago

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

bg370

Newbie Poster

8 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You