javascript 如何使用javascript在一行中的HTML表格单元格上获取Dropdownlist值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30695074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Dropdownlist value on HTML Table Cell in a Row using javascript
提问by user2656044
I have a problem in getting the value of dropdownlist on HTML table. Below is my sample html and javascript.
我在获取 HTML 表上的下拉列表的值时遇到问题。下面是我的示例 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. example:row-1, row-2 .. and so on.
每行都有一个唯一的 td id。例如：第 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.
在下拉列表中选择一个项目时，我想在行单元格内的每一行中显示下拉值。我怎样才能做到这一点？请帮忙。
回答by Beginner
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());
});
Here is the DEMO.
这是演示。
回答by Georgios Dimitriadis
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>
回答by mike.k
Pass the object:
传递对象：
onchange="getValue(this)"
Then, source.parentNodeis the <td>, and source.parentNode.nextSiblingis the adjacent <td>
那么，source.parentNode是<td>，source.parentNode.nextSibling是相邻的<td>
function getValue(source) {
source.parentNode.nextSibling.innerHTML = this.value;
}
