如何在更改下拉列表时获取 <tr><table> 中 <td> 的值

Question

我有一个动态网格，其中有一个 tr。 tr 包含第一个 td，它是一个简单的序列号。其次是下拉菜单。第三个是简单的只显示td

td 包含作为一个属性的 dropdown，称为 discount。

在选择下拉列表时，我想在最后一个 td 中显示折扣值

为此，我在下拉菜单中有一个 on change 功能

 function showDiscount(id) {
       
        var DiscountValue = $('#ddDocuments :selected').attr('discount');
        var text = $('#' + id + 'selected').parent().parent().find('.DiscountPercentage').val();
  }

var DiscountValue = $('#ddDocuments :selected').attr('discount'); 这行代码只是获取从下拉列表中选择选项时的折扣值。例如，如果我选择选项 1，它会显示它的折扣值。如果选择了选项 2，它会显示它的折扣值。

现在我想在最后一次显示折扣值 我一直在尝试这样做

var text = $('#' + id + 'selected').parent().parent().find('.DiscountPercentage').val();

但它只是让我不确定。我觉得我做错了什么。

网格如下：

    html += "<td disabled  class=\"GreyBorder\" >" + Count + "</td>";
                           
                            html += "<td class=\"GreyBorder\" >" + 
 createDropDownSelected(getdocumentbyId), "ddDocuments" + Count, " 
 onchange=\"showDiscount('ddDocuments','" + (Counter--) + "');\"", "98%", drr["docCode"].ToString()) 
   + "</td>";
                            html += "<td class=\"GreyBorder\" >" + 
 createDropDownSelected(getDataTableFromQuery("select defid,deftext from defferalstatus"), " 
     ddDefferalstatus", "", "98%", drr["defid"].ToString()) + "</td>";
                            html += "<td  class=\"DiscountPercentage\"  style=\" text-align: 
     centre;\" id='txtDiscount' > " + drr["Discount"].ToString() + " </td>";

我想在上一个 td 中显示该折扣值

谁能告诉我我错过了什么？

Answer 1

注意 ID：它们必须是唯一的。

我建议从以下位置更改您的内联函数：

onchange="showDiscount('ddDocuments',  (Counter--));

到：

onchange="showDiscount(this, event);"

在哪里： this 指的是当前元素（下拉菜单） event：是事件对象

在任何情况下，您都需要使用.on() 来：

将一个或多个事件的事件处理函数附加到 选定的元素。

现在的新功能是：

 function showDiscount(ele) {
     var DiscountValue = $(ele).find(':selected').attr('discount');
     $(ele).closest('tr').find('.DiscountPercentage').text(DiscountValue);
 }

sn-p：

function showDiscount(ele) {
    var DiscountValue = $(ele).find(':selected').attr('discount');
    $(ele).closest('tr').find('.DiscountPercentage').text(DiscountValue);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td disabled  class="GreyBorder">1</td>
            <td class="GreyBorder">
                <select name="cars" onchange="showDiscount(this, event);">
                    <option value="volvo" discount="10%">Volvo</option>
                    <option value="saab" discount="15%">Saab</option>
                    <option value="mercedes" discount="20%">Mercedes</option>
                    <option value="audi" discount="50%">Audi</option>
                </select>
            </td>
            <td class="GreyBorder">
                <select name="cars">
                    <option value="---">---</option>
                </select>
            </td>
            <td  class="DiscountPercentage"  style="text-align: center;" id="txtDiscount">10% </td>
        </tr>
    </tbody>
</table>