MktoForms2 :: Dependent Selects

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_148"></form>
<script>MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 148,
    function(form) 
    {
        var master = document.getElementById('FirstName');
        var dependent = document.getElementById('LastName');
        var dependencies = JSON.parse(document.getElementById('select-dependencies').innerText)
        var depId = dependent.id, templateId = depId + '_template';
        
        // create template shell
        var dynamicDependentTemplate = document.createElement('SELECT');
        dependent.parentNode.appendChild(dynamicDependentTemplate);        
        
        // clone initial select into template w/modified id
        dependent.setAttribute('id', templateId);
        dynamicDependentTemplate.outerHTML = dependent.outerHTML;
        
        // reset to original id, truncate to placeholder option ("Select...")
        dependent.setAttribute('id', depId);
        dependent.options.length = 1;
        
        // reset reference and eject template from DOM
        dynamicDependentTemplate = document.getElementById(templateId);
        dynamicDependentTemplate.parentNode.removeChild(dynamicDependentTemplate);
        
        // run through master's selected options on every change and repopulate dependent from template
        master[master.addEventListener ? 'addEventListener' : 'attachEvent'](
            master.addEventListener ? 'change' : 'onchange',function(){
            dependent.options.length = 1;
            
            for ( var opts = dynamicDependentTemplate.options, 
                    currentOpt = 1, 
                    maxOpt = opts.length; currentOpt < maxOpt; currentOpt++ ) 
            {
                var newOpt = new Option(), optValue = opts[currentOpt].getAttribute('value');    

                for ( var selects = master.options, 
                        currentSelect = 1, 
                        maxSelect...

CSS

INPUT:focus {
    outline: none;
}