Question

现在，我可以从表内下拉菜单中的onchange事件中获取选定的值，但它仅适用于表的第一行。如果我要更改其他行的值，它将仍然从第一行获取值。

这是我的代码：

<table class="sortable" border="1" id="table">
    <thead>
        <tr>
            <th>Employee Serial</th>
            <th>Grade</th>

        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr style="font-size:11px">
                <td>@item.empSerial</td>

                <td ALIGN="center">
                    <select onchange="getSelValue()" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
                        <option value=@item.technicalComp>@item.grade1</option>
                        <option value=@item.empSerial>0</option>
                        <option value=@item.empSerial>1</option>
                        <option value=@item.empSerial>2</option>
                        <option value=@item.empSerial>3</option>
                        <option value=@item.empSerial>4</option>
                    </select>
                </td>                    

            </tr>
        }
    </tbody>
</table>

使用简单的脚本读取所选值：

function getSelValue() {        
        alert(document.getElementById("drpTechnical").value)         
    }

Answer 1

document.getElementById始终只返回具有该ID的第一个元素，因为ID应该是唯一的。

您想要的是从已更改的元素获取ID。所以你需要this

function getSelValue(this) {        
    alert(this.value)         
}

您的桌子应该像这样

<td ALIGN="center">
  <select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
    <option value=@item.technicalComp>@item.grade1</option>
    <option value=@item.empSerial>0</option>
    <option value=@item.empSerial>1</option>
    <option value=@item.empSerial>2</option>
    <option value=@item.empSerial>3</option>
    <option value=@item.empSerial>4</option>
  </select>
</td>

Answer 2

我认为您在这里犯了一个小错误，您将设置为select标签的ID称为“ drpTechnical”，但是在函数中，您尝试调用ID为“ getSelValue”的元素

尝试更改如下代码代码更新：

 <td ALIGN="center">
   <select onchange="getSelValue(this)" class="testerDrop" 
     style="height:20px; width:100px; text-align-last:center; cursor:pointer">
                    <option value=@item.technicalComp>@item.grade1</option>
                    <option value=@item.empSerial>0</option>
                    <option value=@item.empSerial>1</option>
                    <option value=@item.empSerial>2</option>
                    <option value=@item.empSerial>3</option>
                    <option value=@item.empSerial>4</option>
                </select>
            </td>     

<script>
function getSelValue(obj) {        
    alert(obj.value)         
}
</script>

Answer 3

function getSelValue(e) {        
        alert(e.value)         
    }

<table class="sortable" border="1" id="table">
    <thead>
        <tr>
            <th>Employee Serial</th>
            <th>Grade</th>

        </tr>
    </thead>
    <tbody>

            <tr style="font-size:11px">
                <td>@item.empSerial</td>

                <td ALIGN="center">
                    <select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
                        <option value=@item.technicalComp>@item.grade1</option>
                        <option value=@item.empSerial>0</option>
                        <option value=@item.empSerial>1</option>
                        <option value=@item.empSerial>2</option>
                        <option value=@item.empSerial>3</option>
                        <option value=@item.empSerial>4</option>
                    </select>
                </td>                    

            </tr>

    </tbody>
</table>

尝试一下。

从表格内的下拉菜单中获取选定的值

3 个答案: