<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've just fixed the same issue by changing how the select element was being initialised (dynamically created within a jQuery widget).

Example A

This doesn't work:

var select = $('<select size=7>') // IE9 'first character' bug

This does:

var select = $('<select>').attr('size', 7) // Yay

Example B

Similarly, the following doesn't work:

self.element.append('<select name="mySelect">'); // IE9 'first character' bug

Whereas this will:

var mySelect = $('<select>').attr('name', 'mySelect');
self.element.append(mySelect);

Conclusion

I'd love to be able to explain the above but I'm afraid I can't. Regardless, this might save folk from adding a bunch of CSS hacks to their code unnecessarily.

Answer 2

I'm using angularjs and also running into this issue in ie8/ie9 This approach/workaround worked for me: e.g. With html looking like this:

<select ng-show="data.showSelect" ng-cloak ng-model="data.model" ng-options="l.id as l.name for l in data.items></select>

I have this code run after data for dropdown is loaded and it fixes the issue

$timeout(function(){$scope.data.showSelect = true;},100);

I suppose you could also wrap this into a directive if you had multiple areas on the site needing this workaround.

Answer 3

In my case, I didn't have an event hook to hide the select before the ajax request fires, so I had to force a redraw of the select element after the fact. Re-applying the existing width seems to work:

$("select").width($("select").width());

Answer 4

It is an IE only problem. First set the css display property on the select box to 'none', then populate it via your ajax call, finally when the ajax call is done and the select box is populated remove the css display 'none' property on the select box

Answer 5

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 = $("<select multiple='multiple' name='AvailableFields'></select>")
                                .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)
        {
            $("<option>" + display + "</option>").val(value).appendTo(this.availableFields);
        },

Answer 6

Based on Jim's answer, I pass the drop-down list into this method:

// force redraw to get around bug in IE.
// NOTE that this removes width from the style attribute.
function forceRedraw(jqueryObject) {
    jqueryObject.css('width', 0);
    jqueryObject.css('width', '');  // remove from style tag
}

This works around the bug in IE, and leaves the width of the element where it was before the method was called as long as the width is specified in CSS, not in the style attribute.