javascript - 根据数据库中的下拉值设置 td 填充的背景颜色

Question

对于下面的代码，当选择菜单中的值发生变化时，td 的 bg 颜色也会发生变化。现在，我已经从数据库中检索了选定的值并将其显示在选择菜单上。我想知道是否有任何方法可以根据选定的数据库值更改 td 单元格的 bg 颜色。提前致谢。

$('select').change(function() {
  if ($(this).val() === 'ok') {
    $(this).parent().css({
      'background-color': 'orange'
    });
  } else {
    $(this).parent().css({
      'background-color': 'pink'
    });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding='15'>
  <th>Confirm</th>
  <tr>
    <td>
      <select>
        <option value="ok">OK</option>
        <option value="cancel">Cancel</option>
      </select>
    </td>
  </tr><br>
  <tr>
    <td>
      <select>
        <option value="ok">OK</option>
        <option value="closed">Cancel</option>
      </select>
    </td>
  </tr><br>
</table>

这是我的 PHP，用于检索选定的数据库值

<td><select name="status[]">

<option value="open" <?php if ($row['status'] == 'ok') echo 
'selected="selected"'; ?> > ok</option>
<option value="closed" <?php if ($row['status'] == 'cancel') echo 
'selected="selected"';?> >cancel</option>
  </select></td>

Answer 1

问题是因为您在页面加载时在 PHP 代码中设置了值。这意味着不会发生 change 事件来设置背景颜色。要解决此问题，只需在页面加载时触发 change 事件:

$('select').change(function() {
  if ($(this).val() === 'ok') {
    $(this).parent().css({
      'background-color': 'orange'
    });
  } else {
    $(this).parent().css({
      'background-color': 'pink'
    });
  }
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding='15'>
  <th>Confirm</th>
  <tr>
    <td>
      <select>
        <option value="ok">OK</option>
        <option value="cancel" selected="true">Cancel</option>
      </select>
    </td>
  </tr><br>
  <tr>
    <td>
      <select>
        <option value="ok">OK</option>
        <option value="closed" selected="true">Cancel</option>
      </select>
    </td>
  </tr><br>
</table>