HTML / Javascript addEventListener Onchange事件在Onchange中？
[英]HTML/Javascript addEventListener Onchange event Within an Onchange?
问题描述
所以我一直在研究这一天大约一天...我有一个表单，我有一个选择菜单，其选择触发另一个相关的选择菜单。
我此时要做的是根据第二个选择菜单中的选择填写默认值。 基本上，如果用户在“人工”菜单中选择“操作员”选项，则费率值应预先填充该位置的每日费率 - 假设为100美元。
到目前为止，我已经成功地为函数的第一部分添加了一个事件监听器，并且表单在该选择上调整得很好，但我无法弄清楚如何获得填写的速率。我没有任何运气寻找类似的情况，我已经尝试了很多不同的方式，我认为可行，即，但到目前为止，我已经提出了nuthin但错误。
这是我目前拥有的，显然不起作用：
<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 -->
2 个解决方案
解决方案1
1 2019-04-04 04:27:35
所以，我建议使用数组结构SelStruct
id =“T＆M”无效=>更改为id =“TM”和其他地方某些Id不是唯一的，所以我更改了它们
const MainSelect = document.getElementById('MAIN'), SelStruct = [ { ref : "Labor", subs : [ 'sup', 'opr', 'rig' ] }, { ref : "mateq", subs : [ 'stands', 'beams', 'Mats', 'othermateq' ] }, { ref : "equip", subs : [ 'trailer', 'otherequip' ] }, { ref : "subq", subs : [ 'perdiem', 'othersubq' ] } ] ; function SetSelectMain() { let ref_Select = MainSelect.selectedIndex; for (let i=0; i<SelStruct.length; i++ ) { document.getElementById(SelStruct[i].ref).style.display = (ref_Select===i) ? 'inline' : 'none'; } } SetSelectMain(); // first attempt MainSelect.onchange = SetSelectMain; // init all Sub Select event Listerner for (let i=0; i<SelStruct.length; i++ ) { let id_subSelect = 'choices-' + SelStruct[i].ref; for( let sx=0;sx<SelStruct[i].subs.length; sx++) { document.getElementById(SelStruct[i].subs[sx]).style.display = (sx===0) ? 'inline' : 'none'; } document.getElementById(id_subSelect).addEventListener('change', function() { let ref_subSelect = this.id.substr(8), // ignore string 'choice-' s_elem = SelStruct.find( function(elem){ return (elem.ref===ref_subSelect)}) ; for( sb = 0; sb < s_elem.subs.length; sb++) { document.getElementById(s_elem.subs[sb]).style.display = (this.selectedIndex===sb) ? 'inline' : 'none'; } }) } /* I don't know what to do with this .. document.getElementById('value') = '165'; document.getElementById('value') = '95'; document.getElementById('value') = '85'; */
#TM { display: block; } #TM > div, #TM > div > div { display: none; }
<div id="TM" > <select id="MAIN" name="category"> <option>Labor</option> <option>Materials & Equipment</option> <option>Equipment</option> <option>Subcontractor</option> </select> <div id="Labor" > <select id="choices-Labor"> <option>Supervisor</option> <option>Operator</option> <option>Rigger</option> </select> <div id="sup"> <br /><br /> Qty: <input type='number' step='0.25' value='1'> EA <br /><br /> MH/Unit: <input type='number' step='0.25' value='2'> Total MH: <input type='number' step='0.05' value='1'><br /><br /> Rate: $ <input type='number' step='0.25' > Total: $ <br /><br /> Comments: <textarea cols='30' rows='3'></textarea> </div> <div id="opr"> <br /><br /> Qty: <input type='number' step='0.25' value='1'> EA <br /><br /> MH/Unit: <input type='number' step='0.25' value='2'> Total MH: <input type='number' step='0.05' value='1'><br /><br /> Rate: $ <input type='number' step='0.25' > Total: $ <br /><br /> Comments: <textarea cols='30' rows='3'></textarea> </div> <div id="rig"> <br /><br /> Qty: <input type='number' step='0.25' value='1'> EA <br /><br /> MH/Unit: <input type='number' step='0.25' value='2'> Total MH: <input type='number' step='0.05' value='1'><br /><br /> Rate: $ <input type='number' step='0.25' > Total: $ <br /><br /> Comments: <textarea cols='40' rows='3'></textarea> </div> </div> <div id="mateq" > <select id="choices-mateq"> <option>Stands</option> <option>Beams</option> <option>Mats</option> <option>Other</option> </select> <div id="stands"> <br /><br /> DAYS: <input type='number' step='1' value='0'> Qty: <input type='number' step='1' value='0'><br /><br /> $/Unit: <input type='number' step='0.05' value='10.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> <div id="beams"> <br /><br /> DAYS: <input type='number' step='1' value='0'> Qty: <input type='number' step='1' value='0'><br /><br /> $/Unit: <input type='number' step='0.05' value='10.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> <div id="Mats"> <br /><br /> DAYS: <input type='number' step='1' value='0'> Qty: <input type='number' step='1' value='0'><br /><br /> $/Unit: <input type='number' step='0.05' value='10.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> <div id="othermateq"> <br /><br /> DAYS: <input type='number' step='1' value='0'> Qty: <input type='number' step='1' value='0'><br /><br /> $/Unit: <input type='number' step='0.05' value='10.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> </div> <div id="equip" > <select id="choices-equip" > <option>Trailer</option> <option>Other</option> </select> <div id="trailer"> <br /><br /> DAYS: <input type='number' step='1' value='0'> Qty: <input type='number' step='1' value='0'><br /><br /> $/Unit: <input type='number' step='0.05' value='10.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> <div id="otherequip"> <br /><br /> DAYS: <input type='number' step='1' value='0'> Qty: <input type='number' step='1' value='0'><br /><br /> $/Unit: <input type='number' step='0.05' value='10.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> </div> <div id="subq" > <select id="choices-subq"> <option>Per diem</option> <option>Other</option> </select> <div id="perdiem"> <br /><br /> Qty: <input type='number' step='0.25' value='1'> EA <br /><br /> Rate: <input type='number' step='0.05' value='160.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> <div id="othersubq"> <br /><br /> Qty: <input type='number' step='0.25' value='1'> EA <br /><br /> Rate: <input type='number' step='0.05' value='160.00'> Total: $ <br /><br /> Description: <textarea cols='40' rows='3'></textarea> </div> </div> </div>
解决方案2
1 已采纳 2019-04-04 05:35:52
试试这个，
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。
HTML addEventListener select-onchange或onselect
[英]Html addEventListener select - onchange or onselect
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript：onchange 还是 addEventListener？
HTML addEventListener select-onchange或onselect
用于 HTML 中动态下拉列表的 JavaScript onchange 事件
Javascript Html.Checkbox onchange事件
捕获html5 / javascript onchange事件
更新onChange事件并触发onChange事件javascript
HTML输入onchange事件
Javascript - onchange内<option>
JavaScript或Jquery中的Onchange事件
带有onChange事件的javascript自动完成功能
相关标签