2

I am working on a dynamic dropdown list in a table for each row where I select a course in one select list and the classes associated with it are shown in the second dropdown list.

I was able to perform this using jQuery and ajax but the problem is this works only on the first row of the table and not on the rest of the table.

Below is the jQuery code I am using.

 $(function () {
            $("#table").each(function () {
                $("#CourseName").change(function () {
                    alert("changed");
                    $.ajax({
                        type: 'Post',
                        url: '/RegisterStudents/GetClass',
                        dataType: 'json',
                        data: { id: $("#CourseName").val() },

                        success: function (data) {
                            var items = '';
                            $("#ClassName").empty;
                            $.each(data, function (i, row) {
                                items += '<option value="' + row.value + '">' + row.text + '</option>'
                            });
                            $("#ClassName").html(items);
                        }
                    })
                })

            });

        });

I expect the jQuery script to work for all the dropdown list in every row of the table.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Hitman
  • 23
  • 3

1 Answers1

1

It looks to me like you have the same Id=classname for each rows select so jquery doesn’t know which row to change. Either have unique ids and find a way to associate with the row or use jquery closest to find the rows select you are changing. This link may point you in the right direction.

Getting next closest select element with jquery

Mick
  • 116
  • 5
  • Thanks @Mick, as you said i was not proving unique names to the as it was in a table now i associated them with unique names and they are working as expected. – Hitman May 26 '19 at 11:16