選択したオプションに基づいて表示する必要があるコンボボックスがあります。
しかし、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>
これは、ページが初めてロードされるときに非表示になりません
問題を見つけるのを手伝ってください
よろしく