Javascript для каждого текстового поля зависит от выпадающего списка

Question

Я делаю входную форму с использованием статической строки в 7 строк. Как я могу получить выбранное значение в каждом текстовом поле при выборе выпадающего списка? Я пытался использовать jQuery для этого, но мой код получает ошибку (все текстовые поля изменены). Итак, ниже мой JQuery код:

<script> 
    $(document).ready(function() { 
    $('[name="nm_pot_part_shortage[]"]').on('change', function() { 
     $('[name="nm_maker[]"]').val($(this).val()); 
    }); 
    }); 
</script> 

Изображение моей формы:

Answer 1

Родной JavaScript:

1) Дайте каждому выпадающий идентификатор. Это можно сделать в HTML или динамически в javascript.

2) Назначьте функцию каждому выпадающему меню для события onclick.

3) Получение значения как такового:

function dropdownClicked(){ 
    var ID = this.id; 
    var element = document.getElementById(ID); 
    var value = element.value; 
} 

Answer 2

Вы должны бежать кронштейн обозначения, используя двойные слеши для селектора, имеющего имя, как $('[name="nm_pot_part_shortage\\[\\]"]'), в противном случае вы получите сообщение об ошибке, см следующий код:

$('[name=nm_pot_part_shortage\\[\\]]').on('change', function() { 
    // get current value 
    var selectVal = $(this).val(); 
    // find the input by traversing up the parent first using .closest() 
    // and use .find() to find particular input exist on the same rows with 
    // select element, so this never go down to match another input exist on 
    // another rows 
    $(this).closest('tr').find('[name=nm_maker\\[\\]]').val(selectVal); 
}); 

DEMO(пример, приведенный были используя таблицу)

Бетта r case просто дает все элементы выбора и ввода с тем же именем класса для каждого элемента. В качестве примера дать имя класса myselect, чтобы выбрать элемент и myInput для ввода элемента, в конце JS код будет:

$('.mySelect').on('change', function() { 
    var selectVal = $(this).val(); 
    $(this).closest('tr').find('.myInput').val(selectVal); 
});