Javascript 为什么嵌入式下拉列表只选择第一个选项？

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

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

这是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>

<%}
}%>

路线

---

当从下拉列表中选择员工时，应将所选员工分配给表行中显示的任务。不管选择框在哪一行，都会将员工分配到第一行。这有助于让事情变得更清楚吗？

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

$(".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将返回页面中存在的all class=emp中的所有selected

---

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

我认为您的问题是如何使用选择器并生成ID的HTML。您将每个输入设置为ID的ID，然后对其进行常规选择，即使你是在另一张唱片上表演，也会得到它的第一个实例。您只需将ID设置为select上的数据属性，而不是另一个隐藏输入上的数据属性，然后获取数据属性值以填充您正在反馈的JSON数据，而不是一般地选择ID字段。这实际上会更好，因为您在更改事件上有selecthtml对象，而不必像现在这样返回DOM来修改不同的元素。只需在选项标记中添加一个属性，该属性将是您已经选择的选项上选择的元素，以获取emp id：

<option value='<%= empid %>' **data-attr-id='<%= id %>'**><%= emp %></option>

希望这有帮助

下面是一个JSFIDLE示例：

---

@查理：我不清楚。下拉列表从列表中选择正确的项目，但无论下拉列表位于选项卡中的哪一行，第一行都会受到影响。受什么影响？您所展示的只是ajax成功中的console.log。正在进行DOM修改的代码在哪里？我已经编辑了这个问题，以提供更多信息指定给第一行意味着什么？问题在客户端吗？什么是$'id'，该id是否在第页中重复？你对具体问题不够具体，请参见上面的OP。html显示了一个id=id的隐藏文本输入。这越来越难了。我一定很难理解，因为似乎没有人明白我在说什么。你能不能在代码中给我举个例子，说明如何做到这一点？更新了答案，让我更清楚具体的处理问题的方法很多。试图给你一个方法。德国劳埃德船级社。

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;
  });
});
};

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

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

<option value='<%= empid %>' **data-attr-id='<%= id %>'**><%= emp %></option>

function getEmp(){ 

$(".emp").change(function(){
var optionElement = $("option:selected", this);
var empId = this.value;
var id = $(this).find(':selected').attr('data-attr-id');

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);
            }
        });

    });

};