CODEWITHSUNDEEP
javascriptjquery
Andreas B
Andreas B

Reputation: 107

JQuery on change fired only after second change of select box

I have a select dropdown which should trigger an event on change. Unfortunately, the event won't be called on first change. Any idea why this isn't working on first change?

Table:

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

Select:

<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>

JS:

<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>

So I change a select to value "on", nothing happens. Then I change back to ---Select--- and again to "on" and THEN the text in the table cell will be cleared and the image will be displayed...

Thanks for any help in advance!

Andreas

Upvotes: 0

Views: 40

Answers (1)

The fourth bird
The fourth bird

Reputation: 163342

You are adding the logic using on change, so the first time that will not yet be present.

You might just use the loop instead because that is already using the id's of the selects:

$(document).ready(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="slot1">Slot<br>1</td>
      <td class="slot2">Slot<br>2</td>
    </tr>
  </tbody>
  <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>
</table>

Upvotes: 3

Related Questions