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

1 answer

Try to clone the inputs to the temporary jquery object by changing the selectedIndex property and then adding them. I seem to have remembered something about how to read / write input controls in IE, but right now I can't find any documentation to support this.



All Articles