<select> only shows first char of selected option

Question

I have a standard select box which I\'m populating using jquery by appending options, but for some reason IE9 only shows the first character of the selected option. Needless

Answer 1

I had callbacks in my case, so setting the display to none while being populated was not an option for me, however, I was able to elaborate on @Daniel Brinks answer to fix my problem.. Turns out once any item is added and the display is changed from none to nothing, all future added items will be fine.. using jquery and in a widget.. So if you are trying to fix your widget to work in IE this may be useful to you..

in the _create function of the widget:

this.availableFields = $("")
                                .addClass("ui-fieldselector-available-select")
                                .css("display", "none")
                                .appendTo( this.element );

in the _init function of the widget:

buildAvailableItem - adds to the select

then add to an array that keeps track of the widgets state

var $this = this;
                //IE HACK Part 1--
                $this.buildAvailableItem("Loading...", "Loading..." );
                $this.availableList.push("Loading...");
                //----------------
    //do stuff, here I initialize some functionality, like drag and drop, add click events, etc.
                //IE HACK Part 2--
                $($this.availableFields).css("display", "");
                $this.removeAvailableOption("Loading...");
                //----------------
    // AJAX adding

I normally use a function called addAvailableItem that handles building the item and adding it to the list, but that also triggers an event, and I didn't want an event triggered for the "Loading..." item.

If for some reason someone is using a very slow browser, they will see "Loading..." before it's removed and ajax items are added..

If anyone wants a more copy and paste friendly version let me know

for reference here is build item:

buildAvailableItem: function (display, value)
        {
            $("" + display + "").val(value).appendTo(this.availableFields);
        },