jQuery selectors: Can I use .class for Select Lists?
<p>I am going to have a list of select fields, collecting the same type of data. For example, I'll have a few select lists, tagged to the same class. </p>

<pre><code>&lt;select name="NBSCourse1" class="NBSCourse"&gt;&lt;/select&gt;
&lt;select name="NBSCourse2" class="NBSCourse"&gt;&lt;/select&gt;
&lt;select name="NBSCourse3" class="NBSCourse"&gt;&lt;/select&gt;
// and so on... 
</code></pre>

<p>I've written a method to detect change in the select lists, all referring to them by class.</p>

<pre><code>$("select.NBSCourse").change(function() {
 //Other codes here

})
</code></pre>

<p>It seems that the first select list (name="NBSCourse1") works, but the other select lists do not work. Am I not supposed to use classes for select lists, if there are multiple similar ones?</p>

<hr>

<p><em>Details on what I'm trying to do...</em></p>

<p>Actually, the first row of Select Fields has been initialized by a jQuery function I've wrote: addrow(n). The method is called during, on $(document).ready.</p>

<p>I also have a button "Add More", which will call the addrow(n) function. I've declared a counter that's called 'counterNBSCourse', which I passed into the function. addrow(counterNBSCourse).</p>

<pre><code>function addRow(n){         
var tablerow 
tablerow = "&lt;tr&gt;";
tablerow += "&lt;td&gt;&lt;select name='NBSCourse" + n + "' class='NBSCourse'&gt;&lt;/select&gt;&lt;/td&gt;";
    //Other select fields

   tablerow += "&lt;/tr&gt;"


    $("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++

    }
</code></pre>

<p>As you can see, when I add another row of select fields that has a class "NBSCourse", my  is name according to the current value of "counterNBSCourse". "NBSCourse1","NBSCourse2".. etc.</p>

<p>At the moment, only  responds to the field.</p>

<p>Further notes of the $("select.NBSCourse").change(function() { </p>

<pre><code>$("select.NBSCourse").change(function () {

    //Getting select field's 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 + "&amp;type=courseid",success:function(result) { 

 $("select[name=IndexNo" + num + "]").html(result);                 
}})     
})
</code></pre>
