使用 Jquery 在表中设置下拉列表的选定值

Question

我正在使用 jquery wit dropdownlist 添加一个表格行，如下所示 -

$.each(data, function (i, item) {
$('#tableRM > tbody:last-child').append('<tr sn=' + item.SN + '>
<td>
<select name="RMLotName" class="form-control lotColumns">
<option value="">Select</option>
<option value="Lot1">Lot1</option>
<option value="Lot2">Lot2</option>
<option value="Lot3">Lot3</option>
</select>
</td>
    <td><input name="RMLotQty" type="text" disabled class="form-control lotColumns" value="' + item.LotQty + '" /></td>

</tr>)
    
    }

现在我想用Name = #RMLotName 为下拉列表选择默认值 我试过了：-

$('#RMLotName').val("'" + item.LotName+"'");

和

$("#RMLotName option[value='" + item.LotName+"']").attr('selected', 'selected');

但它不起作用。我搜索了一段时间，发现了一些链接，如 This This 和其他链接，但没有一个有效。

Answer 1

考虑在追加该对象之前从行 html 中创建一个 jQuery 对象。

它允许您在该特定行上使用 jQuery 方法。那么你需要一个更好的<select>选择器

$.each(data, function (i, item) {

      let rowHtml = `<tr sn="${item.SN}"><td>
                <select name="RMLotName" class="form-control lotColumns">
                <option value="">Select</option>
                <option value="Lot1">Lot1</option>
                <option value="Lot2">Lot2</option>
                <option value="Lot3">Lot3</option>
                </select>
                </td>
                <td><input name="RMLotQty" type="text" disabled class="form-control lotColumns" value="${item.LotQty}" /></td>
            </tr>`;
      // create object from html string
      let $row = $(rowHtml)
      // set value of the select within this row instance
      $row.find('select.lotColumns').val(item.LotName);
      // append updated object to DOM
      $('#tableRM > tbody:last-child').append($row);

 });