每个文本框的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

您必须使用带有$('[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 （给出的示例是使用表格）

更好的情况是为每个元素赋予所有select和input相同的类名。例如，给类名myselect选择元素，myInput为输入元素，最后JS代码为：

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

Answer 2

原生Javascript：

1）给每个下拉列表一个ID。这可以在HTML中完成，也可以在javascript中动态完成。

2）为onclick事件的每个下拉列表分配一个函数。

3）检索这样的值：

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