jquery - 如何使用常量类 jQuery 选择不同的下拉菜单

Question

我有一个 HTML 表单，它有多个包含多个类的下拉菜单（但其中 1 个是常量）。一旦用户更改了任何菜单中的值，我就会调用 jQuery 函数。但是，每当我尝试更改第二个或第三个菜单时，该函数仍然只返回第一个菜单的 id 和类。如何获得第二个或第三个菜单的 id/class？

HTML：

     <!-- first dropdown menu-->
     <select id="class1Grade" class="section1 grades">
             <option value=" "></option>
             <option value="A">A</option>
             <option value="B">B</option>
         <option value="C">C</option>
             <option value="D">D</option>
         <option value="F">F</option>
     </select>  

     <!-- second dropdown menu-->
     <select id="class2Grade" class="section2 grades">
             <option value=" "></option>
             <option value="A">A</option>
             <option value="B">B</option>
         <option value="C">C</option>
             <option value="D">D</option>
         <option value="F">F</option>
     </select>  
     <!-- third dropdown menu-->
     <select id="class3Grade" class="section3 grades">
             <option value=" "></option>
             <option value="A">A</option>
             <option value="B">B</option>
         <option value="C">C</option>
             <option value="D">D</option>
         <option value="F">F</option>
     </select>  

jQuery：

$(".grades").change(function() {
    var gradeNumber = $(".grades").attr("id"); //if i select the 2nd/3rd menu, it returns "class1Grade" rather than "class2Grade" or "class3Grade"
    var section = $(".grades").attr('class'); //if i select the 2nd/3rd menu, it returns "section1 grades" rather than "section2 grades" or "section3 grades"
});

Answer 1

你需要这样做：

$(".grades").change(function() {
    var gradeNumber = $(this).attr("id"); 
    var section = $(this).attr('class'); 
});

您需要select使用$(this).

演示：小提琴

---

或使用 HTML DOM 属性：

$(".grades").change(function () {
    var gradeNumber = this.id;
    var section = this.className;
});

演示：小提琴

Answer 2

使用这个关键字

$(".grades").change(function() {
    var gradeNumber = $(this).attr("id"); //or this.id; better and faster option
    var section = $(this).attr('class'); 
});

this指changed上述代码中的当前元素。