我有一个组合框，需要根据我选择的选项显示
但是当我将display none设置为div时，它不会被隐藏。可能是什么问题。
下面是html代码和java脚本
<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>
和我的java脚本：
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';
}
}
更新：
<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="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>
第一次加载页面时不会隐藏
请帮我找到问题
此致
答案 0 :(得分：2)
尝试使用此代码（如果适用于您）
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";
}
}
为此，您应该将此代码用于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>-->
答案 1 :(得分：1)
删除您尝试操作的DIV，只隐藏或显示包含下拉列表的TR。
答案 2 :(得分：0)
我已尝试过您提供的代码且结果正确：http://jsfiddle.net/6mKtZ/
...意味着div id="villageDiv" style="display: none;"被隐藏，页面上显示的唯一内容是“？”