在下拉列表

Question

我有一个包含三列的表格，用于机器类型，序列号和删除。我在桌子上面有一个按钮，它在桌子上添加了一行，我在该添加的行中有一个按钮，一旦它被点击就会删除该行。那部分工作正常。在添加的行中，我有一个下拉列表，它是机器类型，第二个是序列号输入。下拉列表中的两个选项齐头并进。我可以在下拉列表中选择一个选项并获取输入以输入序列号，这可以正常工作。当我添加第二行并选择其他选项时，问题就开始了，它将第一行的输入更改为第二行的输入。

在我的下拉列表中，当选择其他时，我可以选择其他我必须为用户提供在输入文本框中输入机器类型的选项文本框上的序列号。这也很好。只有当我添加第二行时它才起作用。

我希望我已经解释了我想要完成的事情。

这是我的代码：

HTML

<!-- Other Machine Accessories -->
                            <div class="col-sm-offset-2 col-sm-8">                                  
                                <div class="resize">
                                <h5>Other Machine Accessories</h5>                                  
                                    <p><input type="button" class="btn btn-success"  value="Add More"></p>
                                    <table id="otherMachineAccessories" class="table table-striped table-bordered table-hover table-condensed">
                                            <thead>
                                                <tr>
                                                    <th>Machine Type</th>
                                                    <th>Serial Number</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <select id="machineAccessories" name="machineAccessories" class="form-control" onchange="CheckMachineAccessories(this.value);">
                                                            <option value="">Please select Machine Accessories</option>
                                                            <option value="Bridge Unit">Bridge Unit</option>
                                                            <option value="Finisher">Finisher</option>
                                                            <option value="Fax Unit">Fax Unit</option>
                                                            <option value="One Bin Tray">One Bin Tray</option>                                                  
                                                            <option value="LCT">LCT</option>
                                                            <option value="Credenza">Credenza</option>
                                                            <option value="Additional Paper Trays">Additional Paper Trays</option>
                                                            <option value="Wireless Card">Wireless Card</option>
                                                            <option value="Others">Others</option>
                                                        </select>                                                               
                                                        <input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersMachineType" placeholder="Please Enetr Machine Type" class="form-control" type="text"/>       
                                                    </td>                                                           
                                                    <td>
                                                        <div class="bridgeAndFinisher" id="bridgeFinisher" style="display:none;">
                                                            <input name="bridgeUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinisher" placeholder="Please Enter Bridge Unit Serial" class="form-control" type="text"><br>
                                                            <input name="finisherTypeSerialNo" onkeydown="upperCaseF(this)" placeholder="Please Enter Finisher Serial" id="bridgeFinisher" class="form-control" type="text">
                                                        </div>
                                                        <input name="faxUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="faxUnitSerial" placeholder="Please Enter Fax Unit Serial" class="form-control" type="text"/>
                                                        <input name="OneBinTrayTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="oneBinTraySerial" placeholder="Please Enter One Bin Tray Serial" class="form-control" type="text"/>
                                                        <input name="ltcTypeSerial" onkeydown="upperCaseF(this)" style="display:none;" id="lctSerial" placeholder="Please Enter LCT Serial" class="form-control" type="text"/>
                                                        <input name="creTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="credenzaSerial" placeholder="Please Enter Credenza Serial" class="form-control" type="text"/>
                                                        <input name="addTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="additionalPaperTraysSerial" placeholder="Please Enter Additional Paper Trays Serial"  class="form-control" type="text"/>
                                                        <input name="wirelessCard" onkeydown="upperCaseF(this)" style="display:none;" id="wirelessCardSerial" placeholder="Please Enetr Wireless Card Serial" class="form-control" type="text"/>
                                                        <input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersSerial" placeholder="Please Enetr Serial" class="form-control" type="text"/>      

                                                    </td>
                                                    <td><input type="button" class="btn btn-danger" value="Remove" /></td>
                                                </tr>
                                            </tbody>
                                    </table>                    
                                </div>
                            </div><!-- //Other Machine Accessories -->

我的剧本

<!---Script to add other Accossory-->
<script type="text/javascript">

$('#otherMachineAccessories').on('click', 'input[type="button"]', function () {
    $(this).closest('tr').remove();
    })
$('p input[type="button"]').click(function () {
    $('#otherMachineAccessories').append('<tr><td><select id="machineAccessories" name="machineAccessories" class="form-control" onchange="CheckMachineAccessories(this.value);"><option value="">Please select Machine Accessories</option><option value="Bridge Unit">Bridge Unit</option><option value="Finisher">Finisher</option><option value="Fax Unit">Fax Unit</option><option value="One Bin Tray">One Bin Tray</option><option value="LCT">LCT</option><option value="Credenza">Credenza</option><option value="Additional Paper Trays">Additional Paper Trays</option><option value="Wireless Card">Wireless Card</option><option value="others">Others</option></select><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersMachineType" placeholder="Please Enetr Machine Type" class="form-control" type="text"/></div></td><td><div class="bridgeAndFinisher" id="bridgeFinishere" style="display:none;"><input name="bridgeUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Bridge Unit Serial" class="form-control" type="text"/><br><input name="finisherTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Finisher Serial" class="form-control" type="text"/></div><input name="faxUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="faxUnitSerial" placeholder="Please Enter Fax Unit Serial" class="form-control" type="text"/><input name="OneBinTrayTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" placeholder="Please Enter One Bin Tray Serial" id="oneBinTraySerial" class="form-control" type="text"/><input name="ltcTypeSerial" onkeydown="upperCaseF(this)"style="display:none;" placeholder="Please Enter LCT Serial" id="lctSerial" class="form-control" type="text"/><input name="creTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="credenzaSerial" placeholder="Please Enter Credenza Serial" class="form-control" type="text"/><input name="addTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="additionalPaperTraysSerial" placeholder="Please Enter Additional Paper Trays Serial"  class="form-control" type="text"/><input name="wirelessCard" onkeydown="upperCaseF(this)" style="display:none;" id="wirelessCardSerial" placeholder="Please Wireless Card Serial" class="form-control" type="text"/><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersSerial" placeholder="Please Enetr Serial" class="form-control" type="text"/></td><td><input type="button" class="btn btn-danger" value="Remove" /></td></tr>')
});

</script>

<!--Machine Accessories Selection-->
<script type="text/javascript">

    function CheckMachineAccessories(val){

        var element=document.getElementById('bridgeFinisher');
        if(val=='pick machine type' || val=='Bridge Unit' || val=='Finisher')
           element.style.display='block';
         else  
           element.style.display='none';

       var element=document.getElementById('bridgeFinisher');
       if(val=='pick machine type' || val=='Bridge Unit' || val=='Finisher')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('faxUnitSerial');
        if(val=='pick machine type' || val=='Fax Unit')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('oneBinTraySerial');
        if(val=='pick machine type' || val=='One Bin Tray')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('lctSerial');
        if(val=='pick machine type' || val=='LCT')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('credenzaSerial');
        if(val=='pick machine type' || val=='Credenza')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('additionalPaperTraysSerial');
        if (val=='pick machine type' || val=='Additional Paper Trays')
             element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('wirelessCardSerial');
        if (val=='pick machine type' || val=='Wireless Card')
             element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('othersSerial');
        if (val=='pick machine type' || val=='Others')
             element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('othersMachineType');
        if (val=='pick machine type' || val=='Others')
             element.style.display='block';
         else  
           element.style.display='none';
           console.log(val);
    }

</script>

以下是Codepen

上的代码

Answer 1

您遇到的问题是，在HTML文档中，ID只应分配给一个元素。由于您的所有输入共享每行的相同ID，因此对document.getElementById的任何调用都将返回它在第一行中找到的第一个元素。

有很多种方法可以解决这个问题，但您可以尝试的一种方法是为表中的每一行分配一个唯一的ID，并在每个输入上使用name属性。然后，当您尝试调用CheckMachineAccessories时，也会传入该唯一ID。然后，您可以执行类似

的操作，而不是使用document.getElementById

var element = $("#uniqueRowId [name='bridgeFinisher']")[0]

修改

以下是一些澄清：

您希望确保具有ID的每个元素都具有唯一ID。所以你需要做几件事。首先是确保您添加的行在行上具有唯一ID。

//We are starting with 2, because there is already a row in the grid.
var rowId = 2;
$('p input[type="button"]').click(function () {
    $('#otherMachineAccessories').append('<tr id="machineAccessoryRow-' + rowId + '"><td><select id="machineAccessories" name="machineAccessories" class="form-control" onchange="CheckMachineAccessories(this.value, ' + rowId + ');"><option value="">Please select Machine Accessories</option><option value="Bridge Unit">Bridge Unit</option><option value="Finisher">Finisher</option><option value="Fax Unit">Fax Unit</option><option value="One Bin Tray">One Bin Tray</option><option value="LCT">LCT</option><option value="Credenza">Credenza</option><option value="Additional Paper Trays">Additional Paper Trays</option><option value="Wireless Card">Wireless Card</option><option value="others">Others</option></select><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersMachineType" placeholder="Please Enetr Machine Type" class="form-control" type="text"/></div></td><td><div class="bridgeAndFinisher" id="bridgeFinishere" style="display:none;"><input name="bridgeUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Bridge Unit Serial" class="form-control" type="text"/><br><input name="finisherTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Finisher Serial" class="form-control" type="text"/></div><input name="faxUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="faxUnitSerial" placeholder="Please Enter Fax Unit Serial" class="form-control" type="text"/><input name="OneBinTrayTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" placeholder="Please Enter One Bin Tray Serial" id="oneBinTraySerial" class="form-control" type="text"/><input name="ltcTypeSerial" onkeydown="upperCaseF(this)"style="display:none;" placeholder="Please Enter LCT Serial" id="lctSerial" class="form-control" type="text"/><input name="creTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="credenzaSerial" placeholder="Please Enter Credenza Serial" class="form-control" type="text"/><input name="addTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="additionalPaperTraysSerial" placeholder="Please Enter Additional Paper Trays Serial"  class="form-control" type="text"/><input name="wirelessCard" onkeydown="upperCaseF(this)" style="display:none;" id="wirelessCardSerial" placeholder="Please Wireless Card Serial" class="form-control" type="text"/><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersSerial" placeholder="Please Enetr Serial" class="form-control" type="text"/></td><td><input type="button" class="btn btn-danger" value="Remove" /></td></tr>')

  rowId++;
});

这样的示例将创建具有唯一ID的新行。之后，您希望将Id传递给CheckMachineAccessories并根据它过滤元素。

function CheckMachineAccessories(val, rowId){
  var element = $("#machineAccessoryRow-" + rowId + " [name='bridgeFinisher']")[0];
  if(val=='pick machine type' || val=='Bridge Unit' || val=='Finisher') {
    element.style.display='block';
  }
  else { 
    element.style.display='none';
  }
}