This is hard to explain, so please bear with me. I came across a curious scenario today that I solved, but I'm not sure why my solution works.
I created a group of selects and wrote a script that constrains you from selecting the same option more than once by removing the selected option from the other select lists.
However in IE(including IE9), the option list was displaying the wrong option, but once selected it would display the right option.
In my first script you can get to this state by doing the following:
NOTE: This is IE only. Works fine in Chrome
Script: http://jsfiddle.net/s6F4h/37/
Now for my fix which I found by random guess work...
Script: http://jsfiddle.net/s6F4h/36/
Creating my selects like this causes the strange behavior:
var $S1 = $('<select class="question" />');
Creating my selects like this corrects that behavior:
var $S1 = $('<select />', {'class': 'question'});
Lastly, maybe I've just done something incredibly stupid, and in my hysteria have concocted some absurd conclusion. Please, gently, inform me if I have done so.
Or to get the text of the option, use text() : $var = jQuery("#dropdownid option:selected"). text(); alert ($var);
Definition and Usage. The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted) ...
The difference between the two DOM objects is not a matter of data, but rather a matter of the order of operations when they are created.
When you use the inline of $('<select class="blah" />')
, the <select>
element is created with the class already intact, and styled accordingly. When you use $(<select />
, { 'class': 'blah' })`, you perform 2 operations: 1) create the item, 2) set it's class.
This seems innocuous, but it actually forces the browser to do a redraw of the element upon application of the CSS class.
Now - in your scenario, the fact that this causes the specific issue that it does is pretty clearly a bug that applies to IE - but the fact that IE shouldn't behave poorly obviously in no way prevents it from doing so.
Hope this sheds some light.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With