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事件：

＆＃13;

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

＆＃13;

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

＆＃13;

根据数据库

1 个答案: