CODEWITHSUNDEEP
javascript
Chris
Chris

Reputation: 113

Dynamic Select boxes page load

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

Upvotes: 0

Views: 875

Answers (2)

Shadow Wizard
Shadow Wizard

Reputation: 66388

Save the original selected index in dynamicSelect function before calling refreshDynamicSelectOptions, like this:

var nOriginalSelection = sel2.selectedIndex;

Pass this to refreshDynamicSelectOptions function:

refreshDynamicSelectOptions(sel1, sel2, clonedOptions, nOriginalSelection);

Add to the function declaration:

function refreshDynamicSelectOptions(sel1, sel2, clonedOptions, sel2Index) {

And finally in that function add this line after appending all matching options:

sel2.selectedIndex = sel2Index;

Upvotes: 1

Samo
Samo

Reputation: 8240

So all you're having trouble with is defaulting the second dropdown to the first option?

sel2.selectedIndex = 0;

Upvotes: 0

Related Questions