Question

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

问题是无论我从下拉列表中选择什么，所选表行始终只是第一行。换句话说，如果表中有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>

<%}
}%>

和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" 。

由于只能返回一个值，因此它将是选择器

中第一个匹配元素的值

Answer 2

我相信您的问题是您如何使用选择器并为ID生成HTML。您将每个输入设置为ID的ID，然后对其进行常规选择，即使您在不同的记录上操作，也会获得它的第一个实例。您可以将ID设置为选择而不是另一个隐藏输入上的数据属性，然后只需获取数据属性值以填充您正在反馈的JSON数据，而不是通常选择“#id”字段。无论如何，这实际上会更好，因为你在change事件上有选择的html对象，而不必像现在这样回到DOM来创建一个不同的元素。只需在您的选项标记中添加一个属性，该选项标记就是您已经选择的选项中选择的元素，以便从中获取该标识：

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

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

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/

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

2 个答案: