HTML/Javascript addEventListener Onchange 事件在 Onchange 中？

Question

所以我已经为此工作了大约一天......我有一个表单，其中有一个 select 菜单，其选择会触发另一个相关的 select 菜单。

此时我要做的是根据第二个 select 菜单中的 selection 填写一个默认值。基本上，如果用户 select 在人工菜单中选择 "operator" 选项，费率值应该预先填充该职位的每日费率——假设 100 美元左右。

到目前为止，我已经成功地为函数的第一部分添加了一个事件侦听器，并且表单在那个 selection 上调整得很好，但我不知道如何获得速率填写。我没有找到类似情况的运气，我尝试了很多我认为可行的不同方法，即，但到目前为止，我想出了一些错误。

这是我目前拥有的，显然不起作用：

    <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 -->

Answer 1

所以，我建议使用数组结构SelStruct

id="T&M" 无效 => 改为 id="T-M" 和其他地方一些 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';

*/

#T-M { display: block; }
    #T-M > div,
    #T-M > div > div { display: none; }

<div id="T-M" >

  <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>

Answer 2

试试这个，

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"，我更改了那些 [=28] 的 ID =] 输入，因为它违反了 html 标准。也改变了一点js。

HTML/Javascript addEventListener Onchange 事件在 Onchange 中？

HTML/Javascript addEventListener Onchange event Within an Onchange?

html

javascript

onchange