javascript - 为什么嵌入式下拉菜单只选择第一个选项？

Question

我有一个页面，其中包含使用带有express和ejs的 Node 呈现的html页面。该页面中有一个 html 表格，其中一个单元格中有一个选择下拉列表。 下拉列表正确填充了正确的值

问题是无论我从下拉列表中选择什么，所选的表行始终只是第一行。换句话说，如果表中有 7 行，并且我更改了第三行下拉列表中的值，则更改将应用​​于第一行而不是第三行。我希望这足以清楚地理解。

这是 html 表格的代码

<% 
var j1=jobs.j1;j2=jobs.j2;j3=jobs.j3;j4=jobs.j4;j5=jobs.j5;
j6=jobs.j6;j7=jobs.j7;j8=jobs.j8;j9=jobs.j9;j10=jobs.j10;

if (j1 >0) {job1=job[0].JobName;}
if (j2 >0) {job2=job[1].JobName;}
if (j3 >0) {job3=job[2].JobName;}
if (j4 >0) {job4=job[3].JobName;}
if (j5 >0) {job5=job[4].JobName;}
if (j6 >0) {job6=job[5].JobName;}
if (j7 >0) {job7=job[6].JobName;}
if (j8 >0) {job8=job[7].JobName;}
if (j9 >0) {job9=job[8].JobName;}
if (j10 >0) {job10=job[9].JobName;}  
%>

<% if (j1 > 0) {
%>
<table align='left' border='1' ; style='font-size:16px;width:100%'>
<tr>
<th >Nxt</th>  
<th align='left'  style='background-color: #00b0e6;'><%= job1 %></th>
<th align='center' style='background-color: #00b0e6;'> Employee </th>
<th align='center' style='background-color: #00b0e6;'> Status </th>
<th align='center' style='background-color: #00b0e6;'> Emp ID</th>
</tr>
<%
for (var i in taskrows) {
  if (taskrows[i].JobID == j1){
    var task = taskrows[i].Task;
    var emp = taskrows[i].Employee;
    var status = taskrows[i].Status;
    var emp_id = taskrows[i].EmpID;
    var id = taskrows[i].ID;
%>

<tr>
  <td width='5%'><Button style="height:20px; width:30px;"></button></td>
  <td width='40%'><%= task %></td>
  <td align='center' width='5%'>
  <select name='emp' class='emp' onChange='getEmp();' >
  <option value='' selected='selected'><%=emp%></option>

<% for (var i in emprows) {
    var emp = emprows[i].Alias;
    var empid = emprows[i].Emp_ID;
%>
<option value='<%= empid %>'><%= emp %></option>
<%}%>
<input type="hidden" id="id" value=<%=id%>>
</select>
</td>
<td align='center' width='15%'>
<select name='stat' onchange=''>
<option value='' selected='selected'>Not Scheduled</option>
  <% for (var i in statrows) {
    var stat = statrows[i].Status;
    var statid = statrows[i].ID;

  %>
 <option value='<%= statid %>'><%= stat %></option>
 <%}%>
 </select>
 </td>

 <td align='center' width='10%'><%= emp_id %></td>

 </tr>

<%}
}%>

和 JavaScript

<script>
function getEmp(){ 

$(".emp").change(function(){
var emp_id =  $(".emp option:selected").attr('value'); 
var id = $("#id").val();
console.log(id);
  $.ajax({
        type: "GET",
        url: 'getemp',
        data: {emp_id: emp_id, id: id},
        cache: false,
        beforeSend: function () { 
        },
        success: function(data) {
          console.log(data);
            }
        });

    });

};

路由器:

router.get('/getemp', function(req, res, next) {
intake.getEmp(req.query, function(data){
res.end;
});
});

路线

Intake.getEmp = function(query, cb){
var connection = mysql.createConnection({
host     : 'localhost',
user     : '******',
password : '*****',
database : '*********',
});
connection.connect();
var empid = parseInt(query.emp_id);
var id = parseInt(query.id);
var empString = 'SELECT Alias FROM employees WHERE Emp_ID =?';
var insert = [empid];
empString =mysql.format(empString, insert);
connection.query(empString, function(err, empdata, fields) {
  if (err) throw err;
  var emp = empdata[0].Alias;

var queryString = 'UPDATE inv_line_item SET EmpID=?, Employee=? WHERE  ID=?';
var inserts = [empid, emp, id]
queryString = mysql.format(queryString, inserts);
connection.query(queryString, function(err, nothing, fields) {

  if (err) throw err;
  });
});
};

应该发生的情况是，当从下拉列表中选择员工时，应将所选员工分配给表行中显示的任务。发生的情况是，无论选择框位于哪一行，员工都会被分配到第一行。这有助于让事情变得更清晰吗？

Answer 1

您需要使用 this 隔离实例在事件处理程序中。

$(".emp").change(function(){
   // "this" is the select that was changed
   var emp_id =  $(this).val();

   /* your ajax code left out for clarity*/
});

您遇到的问题是 $(".emp option:selected")将返回所有选定的 <option>在全部内class="emp"页面中存在的内容。

由于只能返回一个值，因此它将是选择器中第一个匹配元素的值