如何使用javascript连续获取HTML表格单元格上的Dropdownlist值
[英]How to get Dropdownlist value on HTML Table Cell in a Row using javascript
问题描述
I have a problem in getting the value of dropdownlist on HTML table. 
我在获取HTML表上dropdownlist的值时遇到问题。 Below is my sample html and javascript. 以下是我的示例html和javascript。
<table>
<tr>
<td>
<select id="select1" onchange="getValue(this.value)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-1"></td>
</tr>
<tr>
<td>
<select id="select2" onchange="getValue(this.value)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-2"></td>
</tr>
</table>
<script type="text/javascript">
function getValue(data)
{
var myDiv = document.getElementById( "row-1" );
myDiv.innerHTML = data;
}
</script>
Each row has a unique td id. 每行都有一个唯一的td ID。 example:row-1, row-2 .. and so on. 例如：第1行，第2行..等等。
When selecting an item on the dropdown, I want to display the dropdown value in each row inside the row cell. 在下拉菜单中选择一项时，我想在行单元格的每一行中显示下拉值。 How can I do that? 我怎样才能做到这一点？ Please help. 请帮忙。
3 个解决方案
解决方案1
1 2015-06-07 15:14:24
You can try this: 您可以尝试以下方法：
<table>
<tr>
<td>
<select id="select1">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-1"></td>
</tr>
<tr>
<td>
<select id="select2">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-2"></td>
</tr>
</table>
$('select').change(function() {
var $this = $(this);
$this.parent().siblings('td[id^=row-]').html($this.val());
});
解决方案2
1 已采纳 2015-06-07 15:14:27
Is this what you want? 这是你想要的吗？
<html>
<head></head>
<body>
<table>
<tr>
<td>
<select id="select1" onchange="getValue(this)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="select1-value"></td>
</tr>
<tr>
<td>
<select id="select2" onchange="getValue(this)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="select2-value"></td>
</tr>
</table>
<script type="text/javascript">
function getValue(data)
{
var myDiv = document.getElementById( data.id + '-value' );
myDiv.innerHTML = data.value;
}
</script>
</body>
</html>
解决方案3
0 2015-06-07 15:12:56
Pass the object: 传递对象：
onchange="getValue(this)"
Then, source.parentNode is the <td> , and source.parentNode.nextSibling is the adjacent <td> 然后， source.parentNode是<td> ， source.parentNode.nextSibling是相邻的<td>
function getValue(source) {
source.parentNode.nextSibling.innerHTML = this.value;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.