Changing dropdownlist value inside table cell using javascript

Changing dropdownlist value inside table cell using javascript

In the below example we can change the selected index value inside table cell drop down down list using pure javascript. 

output: 



<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var phraseTable = document.getElementById("myTable");
var comrow = phraseTable.rows[0];
comrow.cells[0].childNodes[1].selectedIndex=3;
var comrow1 = phraseTable.rows[1];
comrow1.cells[0].childNodes[1].selectedIndex=3;
}
</script>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <td>
<select class="selection">
<option value=1>hyderabad</option>
<option value=2>Bangalore</option>
<option value=3>London</option>
<option value=4>US</option>
</select>
</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Show number of cells in first row</button>

</body>
</html>

Share this post :

Post a Comment

Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.

 
Support : Ranga Rajesh Kumar
Copyright © 2012. ASP.NET Examples - All Rights Reserved
Site Designed by Ranga Rajesh Kumar