-1

I have a select menu which is being created dynamically in a javascript file. I have set the css to display:none so that the styling can happen silently before it is loaded. However, I am having trouble targeting it to make it display again. What's a fool-proof way to target it (or any dynamically created select menu) once it's attached to the DOM? Thanks for any insight.

Initial code loading the select menu:

createDropdown:function(oLetter){
    var dropDwn = create({type:"select",id:"glossaryWordDropdown", className:"glossarySelect"});

    for(var i=0;i<oLetter.arWords.length;i++){
        var oWord = oLetter.arWords[i];
        $('<option />', {value: oWord.id, text: oWord.id}).appendTo(dropDwn);
    }
    $(dropDwn).on('change', this.onDropDown.bind(this));

    //add to the wordHolder box
    var wordHolderElement = this._screen.getElementById("wordHolder");
    wordHolderElement._container.innerHTML = "";
    $(wordHolderElement._container).append(dropDwn);
},

CSS:

.glossarySelect {display: none};

JQ:

$( window ).load(function() {
    $(".glossarySelect").css("display", "block");
});

Custom plugin to make select box styles editable (customSelectMenu):

$(".glossarySelect").customSelectMenu({
    menuClass: 'product-select',
    openedClass: 'shown',
    selectedClass: 'active',
    selectionMadeClass: 'selected'
});

Thanks in advance.

pjldesign
  • 387
  • 1
  • 3
  • 17
  • I'd rather go to add a class with `display:none;` which I then remove when I want the element to be shown again. – Lucat Mar 17 '16 at 08:42

1 Answers1

0

Try putting your script inside a doc ready listener

$(document).ready(function() {
 $("select").show();
});

Or try something like this to make sure you have access to elements https://stackoverflow.com/a/29514359/1845664

Community
  • 1
  • 1
Ultradiv
  • 179
  • 2
  • 11
  • Thanks, it's already wrapped in a document.ready function along with all my other little initialization functions. – pjldesign Mar 17 '16 at 08:47