I have a problem in getting the value of dropdownlist on HTML table. Below is my sample html and 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.
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.
I have a problem in getting the value of dropdownlist on HTML table. Below is my sample html and 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.
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.
Share Improve this question asked Jun 7, 2015 at 15:07 user2656044user2656044 472 gold badges3 silver badges8 bronze badges3 Answers
Reset to default 1Is 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>
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.
Pass the object:
onchange="getValue(this)"
Then, source.parentNode is the <td>, and source.parentNode.nextSibling is the adjacent <td>
function getValue(source) {
source.parentNode.nextSibling.innerHTML = this.value;
}