Dynamic Select boxes page load

Posted by Chris on Stack Overflow See other posts from Stack Overflow or by Chris
Published on 2011-01-03T20:32:11Z Indexed on 2011/01/03 20:54 UTC
Read the original article Hit count: 192

Filed under:

Hello,

I have a dynamic chained select box that I am attempting to show the value of on a page load. In my chained select box, it will default to the first option within the select box on page load, could anyone provide assitance?

I stumbled upon this thread, but I can't seem to translate what they are doing with that answer to my language of CF. Dynamic chained drop downs on page refresh

Here is the JS script I am using.

function dynamicSelect(id1, id2) {  
    // Feature test to see if there is enough W3C DOM support  
    if (document.getElementById && document.getElementsByTagName) {  
        // Obtain references to both select boxes  
        var sel1 = document.getElementById(id1);  
        var sel2 = document.getElementById(id2); 

        // Clone the dynamic select box  
        var clone = sel2.cloneNode(true);  
        // Obtain references to all cloned options  
        var clonedOptions = clone.getElementsByTagName("option"); 

        // Onload init: call a generic function to display the related options in the dynamic select box  
        refreshDynamicSelectOptions(sel1, sel2, clonedOptions);  
        // Onchange of the main select box: call a generic function to display the related options in the dynamic select box  
        sel1.onchange = function() {  
            refreshDynamicSelectOptions(sel1, sel2, clonedOptions); 
        } 
    }  
}  

function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {  
    // Delete all options of the dynamic select box  
    while (sel2.options.length) {  
        sel2.remove(0);  
    }  

    // Create regular expression objects for "select" and the value of the selected option of the main select box as class names  
    var pattern1 = /( |^)(select)( |$)/;  
    var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");  
    // Iterate through all cloned options  
    for (var i = 0; i < clonedOptions.length; i++) {  
        // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box  
        if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {  
            // Clone the option from the hidden option pool and append it to the dynamic select box  
            sel2.appendChild(clonedOptions[i].cloneNode(true));  
        }                  
    }  
}

Thanks so much for any assistance

© Stack Overflow or respective owner

Related posts about JavaScript