在下拉选择时显示 jquery append() 中的项目答案

【问题标题】：Displaying items in the jquery append() upon a drop down selection在下拉选择时显示 jquery append() 中的项目
【发布时间】：2021-06-01 09:39:16
【问题描述】：

我在 jquery append() 函数中有一个下拉菜单，每当我单击一个名为“AddItem”的按钮时，它就会将内容添加到表的行中。

$('#tbody').append(`<tr id="R${++rowIdx}">

         <td class="row-index text-center">
            
        <select style="resize:none" id="item-deducted">
          <option id="window" value="Window">Window</option>
          <option id="door" value="Door">Door</option>
        </select>
      </td>


      <td>
          <select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
            <option id="none" value="" selected></option>
            <option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
            <option id="Triangular" value="Triangular">Triangular</option>
          </select>
      </td>

</tr>`);

每当用户在第一个选择下拉菜单中单击或选择选项“窗口”时，我想在第二个选择选项中显示选项“三角形”。

【问题讨论】：

我在下面添加了一个答案，最初“窗口”是选定的选项，这是否意味着默认情况下应该显示第二个下拉菜单？
下面的答案完美无缺，除了当我在桌子上有一个新的或几行时，只有第一行填充了“三角形”选项。如果我在从第一行的第一个下拉菜单中选择“窗口”之前先有几行，也会发生同样的情况。选择第一行作为“窗口”时，如何让相同的事件（任何需要用“三角形”选项填充的行）在列的几行中重复。

标签： javascript html jquery

【解决方案1】：

更改时使用：$('#item-deducted').on('change')。

$('#tbody').append(`<tr id="R$">

         <td class="row-index text-center">
            
        <select style="resize:none" id="item-deducted">
          <option id="window" value="Window">Window</option>
          <option id="door" value="Door">Door</option>
        </select>
      </td>


      <td>
          <select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
            <option id="none" value="" selected></option>
            <option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
            <option id="Triangular" value="Triangular">Triangular</option>
          </select>
      </td>

</tr>`);

$('#item-deducted').on('change', function() {
    if($(this).val() === 'Window'){
    $('#shapeDeducted').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tbody"></div>

【讨论】：

上面的答案完美无缺，除了当我在第一行的表格上有一个新的或几行时填充了“三角形”选项。
不确定您的意思，这是基于id。所以它只适用于 1 个元素。
上述答案完美无缺，除了当我在桌子上有一个新的或几行时，只有第一行填充了“三角形”选项。如果我在从第一行的第一个下拉菜单中选择“窗口”之前先有几行，也会发生同样的情况。选择第一行作为“窗口”时，如何让相同的事件（任何需要用“三角形”选项填充的行）在列的几行中重复。