Question

我希望你能帮助我解决我遇到的Javascript问题，我已经盯着这几天了，我只是想不出来!!

我有一个脚本可以分割选项下拉列表的值，并使用拆分值填充某些字段。

然后我有一个'添加订单行'超链接向表中添加一个新行，但我希望上述功能也可以在任何新行上发生但没有任何反应

我在jsfiddle中重新创建了此内容。

$(window).load(function(){
var selectEl = document.getElementById('part_selection');
selectEl.onchange = function () {
    //var input1 = document.getElementsByName('PART_NO');
    var input2 = document.getElementById('PART_DESCRIPTION');
    var input3 = document.getElementById('PART_PRICE');
    var input4 = document.getElementById('UNIT_MEAS');
    var val = this.value;
    var parts = val.split("_");
    /*input1.value = parts[0];*/
    input2.value = parts[1];
    input3.value = parts[2];
    input4.value = parts[3];
}
});
$(function(){
    var counter = 1;

    $('a.add-line').on('click',function()
    {
        counter ++;
        $(this).prev('table.orderlinelist').find('tr').last().clone().find('input').val('').end().find('input.ORDER_LINE_NO').val(counter).end().appendTo('table.orderlinelist');
    });
    });

<table class="orderlinelist">
<tr>
    <td>Line</td>
    <td>Part</td>
    <td>Part Description</td>
    <td>Unit Price</td>
    <td>Qty</td>
    <td>UoM</td>
    <td>Line Total</td>
</tr>
<tr >
    <td>
        <input type="text" name="ORDER_LINE_NO[]" class="ORDER_LINE_NO" id="ORDER_LINE_NO" value="1" readonly="readonly"/>
    </td>
    <td>
        <select name="PART_NO" id="part_selection">
            <option value="">Select a Part</option>         
            <option class="dropdown1" value="5461_Coxmoor Sideboard_299.00_EACH">5461</option>  
        </select>
    </td>
    <td>
        <input type="text" name="part_desc" id="PART_DESCRIPTION" readonly />
    </td>
    <td>
        <input type="text" name="PART_PRICE[]" id="PART_PRICE" class="orderprice"/>
    </td>
    <td>
        <input type="text" name="QTY[]" id="QTY" class="orderqty"/>
    </td>
    <td>
        <input type="text" name="UNIT_MEAS[]" id="UNIT_MEAS" class="orderuom"/>
    </td>
    <td>
        <input type="text" name="TOTAL" id="TOTAL" class="orderprice"/>
    </td>
</tr>
</table>
<a href="#" title="" class="add-line">Add Line</a>

你能指出我正确的方向吗？

干杯

Answer 1

您可以采取以下步骤来执行您想要的操作：

首先将class个属性添加到input代码，而不是ID。
使用jQuery .on()来处理您的动态事件。
使用closest查找当前行。
然后使用jQuery find，根据class属性找到输入。

继续执行其余的代码方案。

我在您的代码上执行了以下步骤：

$(document).on("change", "table.orderlinelist .part_selection", function () {
    var jrow = $(this).closest('tr');
    var input2 = jrow.find('.PART_DESCRIPTION');
    var input3 = jrow.find('.PART_PRICE');
    var input4 = jrow.find('.UNIT_MEAS');
    var val = this.value;
    var parts = val.split("_");
    input2.val(parts[1]);
    input3.val(parts[2]);
    input4.val(parts[3]);
});

这是您的工作DEMO

Answer 2

您正在复制元素的标识符并指定此事件更改“select”特定。你最好以这种方式与班级合作

http://jsfiddle.net/4dPX2/16/

$(".orderlinelist").on("change", ".part_selection", function (e) {});

JavaScript添加新行并使用下拉值中的数据填充新行输入

2 个答案: