I’m new to JQuery and I hope some experts can help me with a strange issue I’m facing.
I’m building a web application using ASP.NET MVC. In one of the view I’m giving a feature to the end users to add (or) remove a row dynamically to a table using JQuery. The first and second columns of the table will have a drop down list. The third column will have a text box.
If the user is selecting a value in Column 1 dropdown list (options) the list of options in Column 2 dropdown list will change dynamically.
I built this whole thing by referring so many questions & answers out here in SO, (thanks a ton to all the contributors :-), I learnt a lot on JQuery)
This whole feature is working great in Chrome, FF and Safari. However this feature is not working as expected in IE7 and IE8. I’ve not tried it in IE9 so far.
In IE8 after adding couple of rows dynamically if I select any value in the select list 1
(for ex: Row number 9th, column 1) the options are not getting reflected properly in
(Row number 9th, Column 2).
When I inspect the DOM the html is having the correct options which confuses me even more. Any of you have faced this issued in the past by any chance? Or am I doing something stupid?
I have been trying various options however I’m not able to get this work 🙁
I have created a js fiddle hope that may help you in explaining this issue better.
http://jsfiddle.net/msudalai/7dJ6J/
Update: I just found this answer this morning. It worked like a charm
https://stackoverflow.com/a/2040837/1162558
I’m leaving the question out there and see some one has a workaround with JQuery
Try cloning the inputs to a temporary jquery object, changing the selectedIndex property and then appending them. I seem to recall something about read/write once input controls in IE, but I can’t find any documentation to back that up right now.