JavaScript добавляет новую строку и заполняет ввод новых строк данными из выпадающего значения

Question

JavaScript добавляет новую строку и заполняет ввод новых строк данными из выпадающего значения

0

Надеюсь, вы можете помочь мне с проблемой Javascript, с которой я сталкиваюсь, я смотрел на это целыми днями, и я просто не могу понять это!

У меня есть сценарий, который разбивает значение раскрывающегося списка опций и заполняет определенные feilds разделенными значениями.

Затем у меня есть гиперссылка "Добавить строку заказа", чтобы добавить новую строку в таблицу, но я хочу, чтобы вышеуказанная функция выполнялась и на любой новой строке, но ничего не происходит

Я воссоздал это в 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>

Можете ли вы указать мне в правильном направлении?

ура

user3284404 17 фев. 2014, в 13:53

Источник

6

Прежде всего, перестаньте работать с идентификаторами, когда вы добавляете строки, идентификаторы должны быть уникальными и использоваться один раз, когда вы дублируете строки, у вас будет несколько одинаковых идентификаторов.
berentrom 17 фев. 2014, в 12:14

Теги:

javascript

jquery

html

function

2 ответа

0

вы дублируете идентификаторы элементов и присваиваете этому событию изменение "select" Specific. вам лучше работать с классами таким образом

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

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

Paulo Lima 17 фев. 2014, в 10:33

Ещё вопросы

Прежде всего, перестаньте работать с идентификаторами, когда вы добавляете строки, идентификаторы должны быть уникальными и использоваться один раз, когда вы дублируете строки, у вас будет несколько одинаковых идентификаторов.

Mehran Hatami · Accepted Answer · 2014-02-17T09-39-00.000Z

Это шаги, которые вы можете предпринять, чтобы сделать то, что вы хотите:

сначала добавьте атрибуты 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]);
});

Это ваш рабочий ДЕМО

Фантастика!! Спасибо, это работает отлично.