JQuery IE 7 or IE9 dynamically add or remove options in select list that do not update properly
I'm new to jQuery and I hope some experts can help me with the strange problem I'm facing.
Build a Web Application Using ASP.NET MVC. In one of Im's views giving end users the ability to add (or) dynamically delete a row to a table using JQuery. The first and second columns of the table will have a dropdown list. The third column will have a text box.
If the user selects a value in the Column 1 (options) dropdown list, the option list in the Column 2 dropdown will dynamically change.
I built the whole thing by referencing so many Q&A here on SO (thanks a ton to all contributors :-) I learned a lot with JQuery)
This feature works great in Chrome, FF and Safari. However, this feature does not work as expected in IE7 and IE8. I haven't tried this in IE9 yet.
In IE8, after adding a couple of rows dynamically, if I select any value in picklist 1 (ex: row 9th, column 1), the options are not reflected properly in (Line # 9, column 2).
When I check the DOM the html has the correct parameters, which confuses me even more. Have any of you encountered this in the past by accident? Or am I doing something stupid?
I tried different options but Im not able to get this working: --(
I created a hope js fiddle that can help you explain this problem better. http://jsfiddle.net/msudalai/7dJ6J/
Update: I just found this answer this morning. It worked mesmerizingly on StackOverflow question.
I leave the question there and see that someone has a workaround with JQuery
source to share