我正在用html做一个表格。当我在下拉框中选择一个选项时,我希望根据所选选项启用一些输入框和禁用一些输入框。我可以完成其中一个选项,但是当我更改重复的代码时,它会弄乱第一个选项。
javascript function:|
-------------------
<script>
function changeTextBox() {
var comp = document.getElementById('comparator');
if(comp.value=='billing_report')
document.getElementById('from').disabled=false;
document.getElementById('to').disabled=false;
document.getElementById('component').disabled=true;
document.getElementById('company').disabled=false;
document.getElementById('salesperson').disabled=false;
else
document.getElementById('job_no').disabled=true;
document.getElementById('staff_name').disabled=true;
}
</script>
..
html code:|
-----------
<form name="Web Order Form" id="Web Order Form">
<table style="position:absolute; left:580px; top:210px; height:34px;" border="0" bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="50%" cellpadding="5" cellspacing="5">
<tr style="position:absolute; left:0px; top:-42px;">
<td>Select Report:</td>
<label style="font-size:16px" for="comparator">Comparator:</label>
<td><select id="comparator" name="comparator" onChange="changeTextBox();">
<option value="please_select" id="please_select">Please Select...</option>
<option value="billing_report" id="billing_report">Billing Report</option>
<option value="courier_report" id="courier_report">Courier Report</option>
<option value="management_summary_report" id="management_summary_report">Management Summary Report</option>
<option value="production_report" id="production_report">Production Report</option>
<option value="prospect_list" id="prospect_list">Prospect List</option>
<option value="staff_absence_report" id="staff_absence_report">Staff Absence Report</option>
<option value="stock_report" id="stock_report">Stock Report</option>
</select>
<label style="font-size:16px" for="to">Value:</label>
<input type="number" id="value" disabled/></td>
</tr>
<tr>
<div style="position:absolute; left:545px; top:130px; width:510px; height:420px; border:1px solid black">
<tr>
<td>From:</td>
<td><input type="input" value="from" id="from"></td>
<td>To:</td>
<td><input type="input" value="to" id="to"></td>
</tr>
<tr>
<td>Component:</td>
<td><input type="input" value="" id="component"></td>
</tr>
<tr>
<td>Company:</td>
<td><input type="input" value="" id="company"></td>
</tr>
<tr>
<td>Job No:</td>
<td><input type="input" value="" id="job_no"></td>
</tr>
<tr>
<td>Sales Person:</td>
<td><input type="input" value="" id="salesperson"></td>
</tr>
<tr>
<td>Staff Name:</td>
<td><input type="input" value="" id="staff_name"></td>
</tr>
<tr style="position:absolute; left:125px; top:275px;">
<td><input type="submit" value="Build Report"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</div>
<div style="position:absolute; top:115px; left:730px; width:117px; height:30px; background-image: url(Images/reports.jpg); layer-background-image:url(Images/reports.jpg)">
</div>
so when billing report is selected for example then, 'Component', 'Job_No' and 'Staff_Name' will be disabled.
如果在下拉列表中选择了组件报告:则仅启用“To”和“From”。
如果在下拉列表中选择了生产报告,则禁用每个输入框。
以此类推。如果我得到前两个,我相信我可以做剩下的。谢谢。任何帮助,将不胜感激。我在stackoverflow上看过其他类似的问题,但无法让它工作。