JQuery selectors: can i use a class to select lists?

I will have a list of selected fields that will collect the same data type. For example, I will have several select lists marked with the same classes.

<select name="NBSCourse1" class="NBSCourse"></select> <select name="NBSCourse2" class="NBSCourse"></select> <select name="NBSCourse3" class="NBSCourse"></select> // and so on... 

I wrote a method for detecting changes in select lists, all refer to them by class.

 $("select.NBSCourse").change(function() { //Other codes here }) 

It seems that the first selection list (name = "NBSCourse1") works, but the other selection lists do not work. Should I not use classes for select lists if there are several similar ones?


Details of what I'm trying to do ...

Actually, the first line in the "Select Fields" field was initialized by the jQuery function that I wrote: addrow (n). The method is called at time, on $ (document) .ready.

I also have an Add More button that will call the addrow (n) function. I declared a counter called counterNBSCourse, which I passed to the function. addrow (counterNBSCourse).

 function addRow(n){ var tablerow tablerow = "<tr>"; tablerow += "<td><select name='NBSCourse" + n + "' class='NBSCourse'></select></td>"; //Other select fields tablerow += "</tr>" $("table.courses").append(tablerow); //Method to populate select list $.ajax({url:"dropdown.asp?type=courseidfill", success:function(result) { $("select[name=NBSCourse" + n + "]").html(result); }}) counterNBSCourse++ } 

As you can see, when I add another row of selection fields that has the class "NBSCourse", my name matches the current value of "counterNBSCourse". "NBSCourse1", "NBSCourse2", etc.

Currently responds only to the field.

Further notes $ ("select.NBSCourse"). change (function () {

 $("select.NBSCourse").change(function () { //Getting select field name var name name = $(this).attr('name'); //Getting the number tagged behind the select name file var num num = name.replace("NBSCourse",""); //Getting selected value var nbsCourseid; nbsCourseid = $(this).val(); //Function to populate another select field, $.ajax({url:"dropdown.asp?value="+ nbsCourseid + "&type=courseid",success:function(result) { $("select[name=IndexNo" + num + "]").html(result); }}) }) 
+1
source share
3 answers

It's good to use a class selector; you will skip " your $("select.NBSCourse) code $("select.NBSCourse) .

+4
source

You have the missing closing quote:

 $("select.NBSCourse").change(function() { //Other codes here }); 
+1
source

Thanks to everyone. I managed to solve the above question (with the help of my brother, who is obviously more knowledgeable in jQuery!)

It seems that my codes are working fine, but my addrow () function; does not work because I put the script in $ (document) .read (function ()). Therefore, the function could only be called once.

0
source

All Articles