如何獲得價值<td>在 &lt;tr&gt;<table> 關於更改下拉列表

Question

我有一個動態網格，其中有一個 tr。 tr 包含第一個 td，它是一個簡單的序列號。 其次是下拉。 第三個是一個簡單的只顯示 td

包含下拉列表作為稱為折扣的屬性的 td。

在選擇下拉菜單時，我想在最后一個 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指的是當前元素（下拉菜單）事件：是事件對象

在任何情況下，您都需要使用.on()以便：

將一個或多個事件的事件處理函數附加到所選元素。

現在的新功能是：

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

片段：

 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>