2

现在，我可以从表内下拉列表中的事件 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)         
    }
4

3 回答 3

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>
于 2018-11-27T07:10:35.577 回答
0

我认为您在那里犯了一个小错误，您为选择标签设置的 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>
于 2018-11-27T07:08:17.320 回答
0 

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>

尝试这个。

于 2018-11-27T07:32:21.243 回答