Vraagje over dynamic select box - Softwareontwikkeling

dinsdag 25 maart 2008 19:48

Acties:

Topicstarter

Hi

Even een newbie vraagje .
Heb 4 select boxes die dynamisch op elkaar reageren zie HTML code.
Nu krijg ik een fout melding op lijn 18 van mij java script in IE 7.0.
Namelijk :A Runtime Error has occurred.
Line: 18
Error: Object doesn't support this property or method
Heb op diverse fora geken en Google
Weet hier iemand een oplossing voor.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>dynamic select boxes test</title>    
        <script type="text/javascript" src="dynamicselect.js"></script>
    </head>
    <body>
        <form action="#">
            <div>
                <select id="Select1">
                    <option value="select">Select test brand...</option>
                    <option value="test1">test1</option>
                    <option value="test2">test 2</option>
                    <option value="test3">test 3</option>
                </select>
                <select id="Select2">
                    <option class="select" value="select">Select test a...</option>
                    <option class="test1" value="test1a">test 1 a</option>
                    <option class="test2" value="test2a">test 2 a</option>
                </select>
                <select id="Select3">
                    <option class="select" value="select">Select test a...</option>
                    <option class="test1a" value="test1b">test 1 b</option>
                </select>
                <select id="Select4">
                    <option class="select" value="select">Select test a...</option>
                    <option class="test1b" value="test1c">test 1 c</option>
                    <option class="test2a" value="test2c">test 2 c</option>
                    <option class="test3" value="test3c">test 3 c</option>
                </select>
            </div>
        </form>
    </body>
</html>

Java script code

code:

function dynamicSelect(id1, id2) {
    if (document.getElementById && document.getElementsByTagName) {
        var sel1 = document.getElementById(id1);
        var sel2 = document.getElementById(id2);
        var clone = sel2.cloneNode(true);
        var clonedOptions = clone.getElementsByTagName("option");
        refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
        sel1.onchange = function() {
            refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
        };
    }
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
    while (sel2.options.length) {
        sel2.remove(0);
    }
    var pattern1 = /( |^)(select)( |$)/;
    var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
    for (var i = 0; i < clonedOptions.length; i++) {
        if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
            sel2.appendChild(clonedOptions[i].cloneNode(true));
        }
    }
}
window.onload = function() {
    dynamicSelect("Select1", "Select2");
    dynamicSelect("Select2", "Select3");
    dynamicSelect("Select3", "Select4");
    dynamicSelect("Select2", "Select4");
    dynamicSelect("Select1", "Select4");
}

dinsdag 25 maart 2008 20:31

Acties:

Bosmonster

*zucht*

Ik krijg ook in Firefox al direct een foutmelding, zonder dat ik ook maar iets heb aangeklikt. Ik zou daar eens naar kijken, zeker aangezien Firefox fatsoenlijke foutmeldingen geeft.

Verder heb ik niet zo'n zin om je code te gaan zitten debuggen, dat zul je toch echt zelf moeten doen..

Ik kan je wel één tipje geven: ID's en case-sensitivity...

[ Voor 31% gewijzigd door Bosmonster op 25-03-2008 20:33 ]

dinsdag 25 maart 2008 23:34

Acties:

Jessez

Topicstarter

Bosmonster schreef op dinsdag 25 maart 2008 @ 20:31:
Ik krijg ook in Firefox al direct een foutmelding, zonder dat ik ook maar iets heb aangeklikt. Ik zou daar eens naar kijken, zeker aangezien Firefox fatsoenlijke foutmeldingen geeft.

Verder heb ik niet zo'n zin om je code te gaan zitten debuggen, dat zul je toch echt zelf moeten doen..

Ik kan je wel één tipje geven: ID's en case-sensitivity...

De ID's heb ik verandert.

Maar als ik dit weg laat in mijn java script.

code:

1 2	dynamicSelect("Select2", "Select4"); dynamicSelect("Select1", "Select4");

Dan werkt de eerste test maar de bedoeling is dat test twee en drie ook werkt.

woensdag 26 maart 2008 18:16

Acties:

Verwijderd

Dat komt omdat je het onchange event overschrijft bij die laatste twee aanroepen...

JavaScript:

function dynamicSelect(id1, id2) {
    if (document.getElementById && document.getElementsByTagName) {
        var sel1 = document.getElementById(id1);
        var sel2 = document.getElementById(id2);
        var clone = sel2.cloneNode(true);
        var clonedOptions = clone.getElementsByTagName("option");
        refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
        if (typeof sel1.onchange == 'function'){
            var old = sel1.onchange;
            sel1.onchange = function() {
                refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
                old();
            };          
        }else{
            sel1.onchange = function() {
                refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
            };
        }
    }
}

Nu niet meer... ik heb het alleen in FF getest overigens.

Lees ook dit eens: http://www.jibbering.com/faq/faq_notes/closures.html