所以我已经为此工作了大约一天......我有一个表单，其中有一个选择菜单，其选择会触发另一个相关的选择菜单。
此时我要做的是根据第二个选择菜单中的选择填写一个默认值。基本上，如果用户在 Labor 菜单中选择“运算符(operator)”选项，则费率值应该预先填充该职位的每日费率——比如说 100 美元左右。
到目前为止，我已经成功地为函数的第一部分添加了一个事件监听器，并且表单根据该选择进行了很好的调整，但我不知道如何获得要填写的比率。我还没有在寻找类似情况时运气不错，我尝试了很多我认为可行的不同方法，即，但到目前为止，我想出了一些错误。
这是我目前拥有的，显然不起作用:
<script>
document.getElementById('MAIN').addEventListener('change', function () {
var style = this.value == 0 ? 'inline' : 'none';
document.getElementById('Labor').style.display = style;
blurlaborblur();
//document.getElementById('sup').style.display = style;
var style = this.value == 1 ? 'inline' : 'none';
document.getElementById('mateq').style.display = style;
var style = this.value == 2 ? 'inline' : 'none';
document.getElementById('equip').style.display = style;
var style = this.value == 3 ? 'inline' : 'none';
document.getElementById('subq').style.display = style;
});
function blurlaborblur(){
document.getElementById('laborchoices').addEventListener('onblur', function(){
var rate = this.value == laborchoices0 ? 'inline' : 'none';
document.getElementById('value') = '165';
var rate = this.value == laborchoices1 ? 'inline' : 'none';
document.getElementById('value') = '95';
var rate = this.value == laborchoices2 ? 'inline' : 'none';
document.getElementById('value') = '85';
}
</script><body>
<div id="T&M" style="display: block;">
<select id="MAIN" name="category">
<option value="0">Labor</option>
<option value ="1">Materials & Equipment</option>
<option value ="2">Equipment</option>
<option value ="3">Subcontractor</option>
</select>
<div id="Labor" style="display: inline;">
<select id="laborchoices" name="labor">
<option value="laborchoices0">Supervisor</option>
<option value ="laborchoices1">Operator</option>
<option value ="laborchoices2">Rigger</option>
</select>
<div id="sup" style="display: inline;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
MH/Unit: <input type='number' step='0.25' value='2'></input>
Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>
Total: $<br /><br />
Comments: <textarea cols='30' rows='3'></textarea></input>
</div>
<div id="opr" style="display: none;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
MH/Unit: <input type='number' step='0.25' value='2'></input>
Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>
Total: $<br /><br />
Comments: <textarea cols='30' rows='3'></textarea></input>
</div>
<div id="rig" style="display: none;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
MH/Unit: <input type='number' step='0.25' value='2'></input>
Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>
Total: $<br /><br />
Comments: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
<div id="mateq" style="display: none;">
<select id="choices" name="form_select">
<option value="mateqchoices0">Stands</option>
<option value ="mateqchoices1">Beams</option>
<option value ="mateqchoices2">Mats</option>
<option value ="mateqchoices3">Other</option>
</select>
<div id="stands" style="display: inline;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="beams" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="Mats" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="othermateq" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
<div id="equip" style="display: none;">
<select id="choices" name="form_select">
<option value="equipchoices0">Trailer</option>
<option value ="equipchoices1">Other</option>
</select>
<div id="trailer" style="display: inline;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="otherequip" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
<div id="subq" style="display: none;">
<select id="choices" name="form_select">
<option value="subq0">Per diem</option>
<option value ="subq1">Other</option>
</select>
<div id="perdiem" style="display: inline;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
Rate: <input type='number' step='0.05' value='160.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="othersubq" style="display: none;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
Rate: <input type='number' step='0.05' value='160.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
</div>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->最佳答案
试试这个，
if (document.getElementById('MAIN').value == 0)
document.getElementById('rate1').value = '165'; // set the value if no option is selected, this is the default value.
document.getElementById('MAIN').addEventListener('change', function () {
var style = this.value == 0 ? 'inline' : 'none';
document.getElementById('Labor').style.display = style;
var style = this.value == 1 ? 'inline' : 'none';
document.getElementById('mateq').style.display = style;
var style = this.value == 2 ? 'inline' : 'none';
document.getElementById('equip').style.display = style;
var style = this.value == 3 ? 'inline' : 'none';
document.getElementById('subq').style.display = style;
});
// second dropdown change event rather than onblur, and dont wrap events in a function
document.getElementById('laborchoices').addEventListener('change', function () {
// use switch statement if you have to choose one out of multiple options;
switch (this.value) {
case 'laborchoices0':
document.getElementById('rate1').value = '165';
document.getElementById('sup').style.display = 'block';
document.getElementById('opr').style.display = 'none';
document.getElementById('rig').style.display = 'none';
break;
case 'laborchoices1':
document.getElementById('rate2').value = '95';
document.getElementById('sup').style.display = 'none';
document.getElementById('opr').style.display = 'block';
document.getElementById('rig').style.display = 'none';
break;
case 'laborchoices2':
document.getElementById('rate3').value = '85';
document.getElementById('sup').style.display = 'none';
document.getElementById('opr').style.display = 'none';
document.getElementById('rig').style.display = 'block';
}
});<body>
<div id="T&M" style="display: block;">
<select id="MAIN" name="category">
<option value="0">Labor</option>
<option value ="1">Materials & Equipment</option>
<option value ="2">Equipment</option>
<option value ="3">Subcontractor</option>
</select>
<div id="Labor" style="display: inline;">
<select id="laborchoices" name="labor">
<option value="laborchoices0">Supervisor</option>
<option value ="laborchoices1">Operator</option>
<option value ="laborchoices2">Rigger</option>
</select>
<div id="sup" style="display: inline;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
MH/Unit: <input type='number' step='0.25' value='2'></input>
Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
Rate: $<input id='rate1' type='number' step='0.25' placeholder=$rate ></input>
Total: $<br /><br />
Comments: <textarea cols='30' rows='3'></textarea></input>
</div>
<div id="opr" style="display: none;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
MH/Unit: <input type='number' step='0.25' value='2'></input>
Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
Rate: $<input id='rate2' type='number' step='0.25' placeholder=$rate ></input>
Total: $<br /><br />
Comments: <textarea cols='30' rows='3'></textarea></input>
</div>
<div id="rig" style="display: none;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
MH/Unit: <input type='number' step='0.25' value='2'></input>
Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
Rate: $<input id='rate3' type='number' step='0.25' placeholder=$rate ></input>
Total: $<br /><br />
Comments: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
<div id="mateq" style="display: none;">
<select id="choices1" name="form_select">
<option value="mateqchoices0">Stands</option>
<option value ="mateqchoices1">Beams</option>
<option value ="mateqchoices2">Mats</option>
<option value ="mateqchoices3">Other</option>
</select>
<div id="stands" style="display: inline;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="beams" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="Mats" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="othermateq" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
<div id="equip" style="display: none;">
<select id="choices2" name="form_select">
<option value="equipchoices0">Trailer</option>
<option value ="equipchoices1">Other</option>
</select>
<div id="trailer" style="display: inline;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="otherequip" style="display: none;">
<br /><br />DAYS: <input type='number' step='1' value='0'></input>
Qty: <input type='number' step='1' value='0'></input><br /><br />
$/Unit: <input type='number' step='0.05' value='10.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
<div id="subq" style="display: none;">
<select id="choices3" name="form_select">
<option value="subq0">Per diem</option>
<option value ="subq1">Other</option>
</select>
<div id="perdiem" style="display: inline;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
Rate: <input type='number' step='0.05' value='160.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
<div id="othersubq" style="display: none;">
<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
Rate: <input type='number' step='0.05' value='160.00'></input>
Total: $ <br /><br />
Description: <textarea cols='40' rows='3'></textarea></input>
</div>
</div>
</div>
</body>我注释掉了一些js的改动
注意:- 您有几个具有相同 ID 名称的输入元素，即“rate”和“choices”，我更改了这些 html 输入的 id，因为它违反了 html 标准。也更改了一些 js。
关于javascript - HTML/Javascript addEventListener Onchange 事件在 Onchange 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55507660/