Javascript 仅在选择框的第二次更改后激发JQuery on change

我有一个select下拉列表，它应该在更改时触发一个事件。不幸的是，第一次更改时不会调用该事件。你知道为什么第一次改变不起作用吗

表:

<table>
  <tbody>
    <tr>
      <td class="slot1">Slot<br>1</td>
      <td class="slot2">Slot<br>2</td>
    </tr>
  </tbody>
</table>

槽
1
槽
2

选择：

<div class="selects">
  <label>Slot 1</label>
  <select id="slot1" name="slot1">
    <option value="NULL">---Select---</option>
    <option value="on">on</option>
  </select>
  <label>Slot 2</label>
  <select id="slot2" name="slot2">
    <option value="NULL">---Select---</option>
    <option value="on">on</option>
  </select>
  // ...
</div>

插槽1
---挑选---
在…上
插槽2
---挑选---
在…上
// ...

JS:

$（文档）.ready（函数（）{
$（文档）.on（'change'，'selects'，function（）{
变量插槽=['1'、'2'、'3'、'4'、'5'、'6'、'7'、'8'、'9']；
$。每个（插槽、函数（索引、值）{
$（“#插槽”+值）。更改（函数（）{
if（$（'#slot'+value）.val（）='NULL'）{
开关（值）{
案例“1”：
var v='插槽\n1'；
打破
案例“2”：
变量v='插槽\n2'；
打破
// ...
}
$（'td.slot'+值）.text（v）；
}否则{
$（'td.slot'+值）.text（''）；
$（'td.slot'+值）.prepend（''）；
}
});
});
});
});

所以我把一个select值改为“on”，什么也没发生。然后我又改回--Select--并再次改为“on”，然后表格单元格中的文本将被清除，图像将被显示

提前谢谢你的帮助

---

Andreas

您正在使用on change添加逻辑，因此第一次还不会出现

您可以只使用循环，因为它已经在使用选择的id：

$（文档）.ready（函数（）{
变量插槽=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9']；
$。每个（插槽、函数（索引、值）{
$（“#插槽”+值）。更改（函数（）{
if（$（'#slot'+value）.val（）='NULL'）{
开关（值）{
案例“1”：
var v='插槽\n1'；
打破
案例“2”：
变量v='插槽\n2'；
打破
// ...
}
$（'td.slot'+值）.text（v）；
}否则{
$（'td.slot'+值）.text（''）；
$（'td.slot'+值）.prepend（''）；
}
});
});
});

槽
1
槽
2
插槽1
---挑选---
在…上
插槽2
---挑选---
在…上
// ...
您正在使用on change添加逻辑，因此第一次还不会出现

您可以只使用循环，因为它已经在使用选择的id：


$（文档）.ready（函数（）{
变量插槽=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9']；
$。每个（插槽、函数（索引、值）{
$（“#插槽”+值）。更改（函数（）{
if（$（'#slot'+value）.val（）='NULL'）{
开关（值）{
案例“1”：
var v='插槽\n1'；
打破
案例“2”：
变量v='插槽\n2'；
打破
// ...
}
$（'td.slot'+值）.text（v）；
}否则{
$（'td.slot'+值）.text（''）；
$（'td.slot'+值）.prepend（''）；
}
});
});
});

槽
1
槽
2
插槽1
---挑选---
在…上
插槽2
---挑选---
在…上
// ...
@canybeer的答案是正确的。DIV元素不能有更改事件。@canybeer回答正确。DIV元素不能有更改事件。像一个符咒一样工作！谢谢=）工作得很有魅力！谢谢=）
<script type="text/javascript">
  $(document).ready(function(){
    $(document).on('change','.selects',function(){
      var slots = ['1','2','3','4','5','6','7','8','9'];
      $.each(slots, function(index, value) {
        $('#slot'+value).change(function(){
          if($('#slot'+value).val() === 'NULL'){
            switch(value){
              case '1' :
                var v = 'Slot\n1';
                break;
              case '2' :
                var v = 'Slot\n2';
                break;
              // ...
            }
            $('td.slot'+value).text(v);
          }else{
            $('td.slot'+value).text('');
            $('td.slot'+value).prepend('<img src="https://img.icons8.com/material/24/000000/console.png" style="width: 100%; height: 100%; object-fit: contain"\>');
          }
        });
      });
    });
  });
</script>