Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<select> only shows first char of selected option

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 to say it works perfectly in FireFox and Chrome, but I have to support IE9. I tried the IE9 compatibility modes, but it made no difference, nor does styling the select or option.

Has anyone seen this issue before. What caused it? How did you fix it?

Example of problem in IE9

Simplified code sample:

<select id="selectCCY" ValueColumn="ccyID" DisplayColumn="ccySymbol" ></select>    $.each(res.result, function (key, value) {       $('#selectCCY').append('<option value="' + value[$('#selectCCY').attr('ValueColumn')]+ '">' + value[$('#selectCCY').attr('DisplayColumn')] + '</option>'); }); 

res.result is a simple json array like this:

[{"ccyID":1,"ccySymbol":"GBP"},{"ccyID":2,"ccySymbol":"AUD"},{"ccyID":3,"ccySymbol":"USD"}] 

OH BUGGER!!! it works fine in my simplified example, so the problem is somewhere else. Sorry. The original code is to long and complex to paste here, but will let you know when I find the answer.

some time later....

OK, I got the problem down to an ajax call inside a $(selector).each() loop. The loop goes through all select boxes and asyncronously populates the options. If I make it a syncronous call, the select boxes have the correct width and show correctly, but if its an async call the select boxes only show the first char as in the image. still working on this, will get back to you again.

I still want to know what would cause a select box to display incorrectly. I can do workarounds and get it to show correctly, but that doesn't answer the question. It's just a select with options in it, it should always just work, right?

after a weekend of ignoring the issue ....

Right I found a workaround. Before doing the ajax call to populate the select box I first set the css display property to 'none' on it, then populate it and finally when the ajax call and population is complete I just remove the css display 'none' property.

So I still don't know why IE doesn't like me, but we have a solution at least.

like image 637
Daniel Brink Avatar asked May 06 '11 08:05

Daniel Brink


People also ask

How do I change selected option in select tag?

In order to change the selected option by the value attribute, all we have to do is change the value property of the <select> element. The select box will then update itself to reflect the state of this property.

How do you select the first selection option in HTML?

The selected attribute is a boolean attribute. When present, it specifies that an option should be pre-selected when the page loads. The pre-selected option will be displayed first in the drop-down list. Tip: The selected attribute can also be set after the page loads, with a JavaScript.


2 Answers

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()); 
like image 162
Jim Thomas Avatar answered Oct 03 '22 08:10

Jim Thomas


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

like image 21
Daniel Brink Avatar answered Oct 03 '22 08:10

Daniel Brink