動態行，下拉式複選框不起作用

我有一個HTML表單，用戶可以根據需要添加和刪除行。這部分工作，因爲它應該。該行的一部分是帶有複選框的下拉列表，這也適用於它。手頭的問題是當用戶單擊添加按鈕添加新行時，複選框下拉菜單在新行上不起作用。動態行，下拉式複選框不起作用

對不起，代碼塊很長，我只是想確保我沒有留下這麼明顯的東西。提前感謝您提供的所有幫助，我對這一切都比較陌生。

HTML代碼

<h2>Please fill in the information below</h2> 
     <form action="pmUnitCreate.php" method="post"> 
      <p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p> 

      <input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/> 
      <input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/> 



      <br> 

      <table id="myTable" class="form"> 

       <tr id="heading"> 
       <th><b><font size="4">Job Number</font></b></th> 
       <th><b><font size="4">Unit Number</font></b></th> 
       <th><b><font size="4">Job Code</font></b></th> 
       <th><b><font size="4">Model Number</font></b></th> 
       <th><b><font size="4">Scope</font></b></th> 
       </tr> 

       <tr id="tableRow"> 
        <td> 
         <input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly> 
        </td> 

        <td> 
         <input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly> 
        </td> 

        <td> 
         <select name="JobCode[]" style="background-color:#FFE68C" required> 
          <option></option> 
          <option>F</option> 
          <option>FS</option> 
          <option>PD</option> 
          </select> 
        </td> 

        <td> 
         <input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required> 
        </td> 

     <td> 
       <div id="Scope[]" class="dropdown-check-list" tabindex="100"> 
       <span class="anchor" style="background-color:#FFE68C">Select Scope</span> 
       <ul id="items" class="items"> 
      <input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font> 
      <input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font> 
      <input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font> 
       <input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font> 
       <input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font> 
       <br><br> 
       <input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font> 
       <input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font> 
        <input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font> 
        <input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font> 
        <input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font> 
        <br><br> 
      <input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font> 
      <input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font> 
       <input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font> 
       <input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font> 
       <input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font> 
       <input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font> 
       <br><br> 
       <input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font> 
        <input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font> 
        <input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font> 
        <input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font> 
      <input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font> 
      <br><br> 
      <input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font> 
       <input type="checkbox" name="S23" value="XP"/><font size="4">XP</font> 
       <input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font> 
       <input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font> 
       <input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font> 
        <input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font> 
        <br><br> 
        <input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font> 
        <input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font> 
        <input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font> 
      <input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font> 
      <input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font> 
      <br><br> 
       <input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font> 
       <input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font> 
       <input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font> 
       <input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font> 
        <input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font> 
        <br><br> 
        <input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font> 
        <input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font> 
        <input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font> 
      <input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font> 
      <input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font> 
      <br><br> 
       <input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font> 
       <input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font> 
       <input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font> 
       <input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font> 
        <input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font> 
        <br><br> 
        <input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font> 
        <input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font> 
        <input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font> 
      <input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font> 
      <input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font> 
      <br><br> 
       <input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font> 
       <input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font> 
       <input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font> 
       <input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font> 
        <input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font> 
        <br><br> 
        <input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font> 
        <input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font> 
        <input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font> 
      <input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font> 
      <br><br> 
      <input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font> 
       <input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font> 
       <input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font> 
       <input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font> 
       <input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font> 
       <br><br> 
        <input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font> 
        <input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font> 
        <input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font> 
        <input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font> 
      <input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font> 
      <br><br> 
      <input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font> 
       <input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font> 
       <input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font> 
       <input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font> 
       <input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font> 
       <br><br> 
        <input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font> 
        <input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font> 
        <input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font> 
        <input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font> 
      <input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font> 
      </ul> 
      </div> 
      </td>    




       </tr> 

      </table>

JS代碼

   <script> 

function incrementUnitId(unitId) { 
    var arr = unitId.split('-'); 
    if (arr.length === 1) {return;} // The unit id is not valid; 
    var number = parseInt(arr[1]) + 1; 
    return arr[0] + '-' + (number < 10 ? 0 : '') + number; 
    } 

function addRow() {     
    var row = document.getElementById("tableRow"); // find row to copy 
    var table = document.getElementById("myTable"); // find table to append to 
    var clone = row.cloneNode(true); // copy children too 
    row.id = "oldRow"; // We want to take the last value inserted 
    clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value) 
    table.appendChild(clone); // add new row to end of table 
    } 


function deleteRow() { 
    document.getElementById("myTable").deleteRow(-1); 
    } 

var checkList = document.getElementById('Scope[]'); 
var items = document.getElementById('items'); 
    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) { 
     if (items.classList.contains('visible')){ 
      items.classList.remove('visible'); 
      items.style.display = "none"; 
     } 

     else{ 
      items.classList.add('visible'); 
      items.style.display = "block"; 
     } 


    } 

    items.onblur = function(evt) { 
     items.classList.remove('visible'); 
    } 
      </script>

來源

2016-08-15 elliottdan

你將click事件附加到第一個錨點checkList.getElementsByClassName（'anchor'）[0] .onclick'，爲什麼新的應該工作？ –

它適用於第一行。當用戶向表中添加新行時，新添加的下拉列表不起作用。 – elliottdan

我相信你的問題是與事件結合做。您正在動態添加HTML，因此事件需要綁定到它才能觸發。這個問題的答案可能會對你有所幫助：Event binding on dynamically created elements?

來源

2016-08-15 15:17:39 ModusPwnens

我看了類似的東西。但是，這是jQuery，我試圖完成這只是使用JavaScript。 – elliottdan

啊，對不起。你遇到過這個答案嗎？ http://stackoverflow.com/questions/30880757/javascript-equivalent-to-on – ModusPwnens

我已經看過這個答案。在這種情況下，它似乎沒有幫助我。謝謝你 – elliottdan

動態行，下拉式複選框不起作用

回答

相關問題