javascript - 选择并显示为表行创建的每个新 "select option"中的值

Question

到目前为止，我找不到以下问题的解决方案。如果有人能在这方面帮助我，我将非常高兴。

我有一个简单的表格，其中有 1 个选择框和一个文本框。我正在使用 jQuery 脚本添加按钮添加表行。同样还有删除选项。

我的目标是在每行中显示选定的名称。但是，当我添加行然后选择“选择选项”时，每行的名称都会发生变化。这不是这里的目的。

这是用于测试的 fiddle 链接 - https://jsfiddle.net/rmse9nw3/

<table id="datagrid" class="display table1">

  <th>Employee Code</th>
  <th>Employee Name</th>

<tr id="row1">
    <td > 
    <select name="empid" class="dropdn">
        <option>Please select...</option>
        <option>Jhon Doe</option>
        <option>George Antony</option>
        <option>David Blare</option>
        <option>Kene Roy</option>
    </select> 

    </td>

    <td>
        <input type='text' readonly name="name" size="20" class="name" value=""/>
    </td>
    <td>
        <input type="button" name="addRow" class="add" value='Add'/>
    </td>
    <td>
        <input type="button" name="removeRow" class="removeRow" value='Delete'/>
    </td>

而 jQuery 是 -

$(document).ready(function () {

    $(document).on('click','#datagrid .add',function () {

           var row=$(this).closest('tr');
           var clone = row.clone();
           var tr= clone.closest('tr');
           tr.find('input[type=text]').val('');
           $(this).closest('tr').after(clone);
           var $span=$("#datagrid tr");
           $span.attr('id',function (index) {
           return 'row' + index;

        });

    });

    $(document).on('click','#datagrid .removeRow',function () {
        if ($('#datagrid .add').length > 1) {
            $(this).closest('tr').remove();
        }

    });

}); 

var dropDown = ".dropdn";
var empName = ".name";

$(document).on("change",(dropDown),function(e){

    var value = $.trim($(this).val());

    $(empName).val(value);

}); 

Answer 1

您可以使用 :last 伪选择器来选择类名为“name”的最后一个克隆元素，

var dropDown = ".dropdn";
var empName = ".name:last";//select last element having classname named 'name'

$(document).on("change",(dropDown),function(e){

    var value = $.trim($(this).val());
    $(empName).val(value);

});