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自動完成功能
相關標簽