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

Question

我有一个页面，其中包含一个使用带有 express 和 ejs 的节点呈现的 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") 将返回 all 在页面中存在的 all class="emp" 内选择的 <option>。

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

Answer 2

我认为您的问题是您如何使用选择器并为 ID 生成 HTML。您将每个输入设置为 id 的 ID，然后对其进行一般选择，即使您正在处理不同的记录，也会获得它的第一个实例。您可以将 ID 设置为 select 上的数据属性，而不是另一个隐藏的输入，然后只获取数据属性值来填写您反馈的 JSON 数据，而不是一般选择“#id”字段。无论如何，这实际上会更好，因为您在更改事件上有选择 html 对象，并且不必像现在一样返回到 DOM 来查找不同的元素。只需在您的选项标签中添加一个属性，该属性将是您已经选择的选项上选择的元素以获取 emp id：

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

然后您可以使用标准的 get 属性调用来获取与当前选定元素相关联的 id，因为您已经在更改事件中选择了选项。

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

    });

};

http://www.w3schools.com/jsref/met_element_getattribute.asp希望这会有所帮助。

这是一个带有示例的 jsfiddle：

https://jsfiddle.net/r4s2c0m7/1/