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: 258
        
JavaScript
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