not able to hide div - html

Question

I have combo box which needs to be displayed based on the option i select,
but when i set display none to div it is not getting hidden. what could be the problem.
below is the html code and java script
<div id="addBanks" style="display: none" style="overflow: auto;height: 75%">
<table id="commonBodyTable" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="100%" align="center" class="tableBorder2" border="0" cellpadding="2" cellspacing="0">
<tr>
<td colspan="4" class="mainheader">Add Banks</td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">Bank Code</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="bankcode" id="bankcode" maxlength="20" /></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">Bank Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="bankname" id="bankname" maxlength="20" /></td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">Branch Code</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="branchcode" id="branchcode" maxlength="20" /></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">IFSC Code</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="text" class="textbox" name="ifsccode" id="ifsccode" maxlength="20" /></td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">Country</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" class="textfieldalign"><select class="combobox" name="countryid" id="countryid" onchange="getStates(this.value)">
<option value="" >- - - Select Country Name - - -</option>
</select></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">State</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" class="textfieldalign"><select class="combobox" name="stateid" id="stateid">
<option value="" >- - - Select State Name - - -</option>
</select></td>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign">District Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="districtid" id="districtid">
<option value="" >- - - Select District Name - - -</option>
</select></td>
</tr>
<tr class="lightrow">
<td width="30%" class="textalign">Town or Village</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign">
Town <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="townOpt" onclick="enableVillageOrTown(this)"/>
Village <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="villageOpt" onclick="enableVillageOrTown(this)"/>
</td>
</tr>
<div id="villageDiv" style="display: none;">
<tr class="darkrow">
<td width="30%" class="textalign">Village Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="villageid" id="villageid">
<option value="" >- - - Select Village Name - - -</option>
</select></td>
</tr>
</div>
<tr class="darkrow">
<div id="townDiv" style="display: none;">
<td width="30%" class="textalign">Town Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="townid" id="townid">
<option value="" >- - - Select Town Name - - -</option>
</select></td>
</div>
</tr>
<tr class="darkrow">
<td width="30%" class="textalign"> </td>
<td width="5%" class="mandatory"> </td>
<td width="65%" colspan="2" class="textfieldalign" ><input type="button" class="submitbu" name="save" id="save" value="Save" onclick="saveState()">
<input type="button" class="submitbu" name="cancel" id="cancel" value="Cancel" onclick="cancelAddState();"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and my java script :
function enableVillageOrTown(opt){
var optionValue = opt.value;
if(optionValue=='townOpt'){
document.getElementById("townDiv").style.display = "";
document.getElementById("villageDiv").style.display = 'none';
}
if(optionValue=='villageOpt'){
document.getElementById("villageDiv").style.display = "";
document.getElementById("townDiv").style.display = 'none';
}
}
UPDATE :
<div id="villageDiv" style="display: none;">
<tr class="darkrow">
<td width="30%" class="textalign">Village Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="villageid" id="villageid">
<option value="" >- - - Select Village Name - - -</option>
</select></td>
</tr>
</div>
also this is not properly aligned when
<tr class="lightrow">
<td width="30%" class="textalign">Town or Village</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign">
Town <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="townOpt" onclick="enableVillageOrTown(this)"/>
Village <input type="radio" class="textbox" name="optTownOrVillage" id="optTownOrVillage" value="villageOpt" onclick="enableVillageOrTown(this)"/>
</td>
</tr>
this is not hidden when the page first time loads
Please help me to find the problem
Regards

Answer 1

Try this code, if it works for you
function enableVillageOrTown(opt){
var optionValue = opt.value;
if(optionValue=='townOpt'){
document.getElementById("townDiv").style.display = "";
document.getElementById("villageDiv").style.display = "none";
}
if(optionValue=='villageOpt'){
document.getElementById("villageDiv").style.display = "";
document.getElementById("townDiv").style.display = "none";
}
}
For that your should use this code for HTML
<!--<div >-->
<tr class="darkrow" id="villageDiv" style="display: none;">
<td width="30%" class="textalign">Village Name</td>
<td width="5%" class="mandatory">*</td>
<td width="65%" colspan="2" class="textfieldalign" >
<select class="combobox" name="villageid" id="villageid">
<option value="" >- - - Select Village Name - - -</option>
</select></td>
</tr>
<!--</div>-->

Answer 2

Remove the DIVs that you are trying to manipulate and just hide or show the TRs that contain the drop downs.

Answer 3

I have tried the code you provided and the results are correct: http://jsfiddle.net/6mKtZ/
...meaning that div id="villageDiv" style="display: none;" is hidden and the only thing that shows up on the page is "?"