Question

Trying to achieve the “drop down” effect I have on my form here once you click “add mileage and open it that is”

it seems to only happen upon the first load, if you refresh or go back to the page at anytime the damn thing turns into an ugly normal non jquery drop down. im assuming its because im using javascript to populate my select (drop down). Any help would be appreciated….`

.js

// Create select element with options.
function makeRunRecord() {
    var formTag = document.getElementsByTagName('form'),
        selectList = ge('select'),
        makeSelect = document.createElement('select');
        makeSelect.setAttribute("id", "styles");
    makeSelect.setAttribute("name", "styles");
        makeSelect.setAttribute("class", "required select");
        makeSelect.setAttribute("data-native-menu", "false");
        var makePlace = document.createElement('option');
    makePlace.setAttribute("data-placeholder", "true");
    makePlace.setAttribute("value", "");
    makeSelect.appendChild(makePlace);
    for (var i=0, j=runningStyles.length; i<j; i++) {
        var makeOption = document.createElement('option');
        var optText = runningStyles[i];
        makeOption.setAttribute("value", optText);
        makeOption.innerHTML = optText;
        makeSelect.appendChild(makeOption);
    }
    selectList.appendChild(makeSelect);
};


// Call Functions

makeRunRecord();

});
.html

                   <li><div id="select"><label for="rStyle">Choose Run Style*</label></div>

Answer 1

Try running the function after the page has loaded:

window.onload = function() {
    makeRunRecord();
}