jquery - 根据选定的下拉菜单设置 td 单元格的背景颜色

Question

我的代码:

<table>
  <tr>
    <td>
      <select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
        <option value=""></option>
        <option value="1" style="background-color:yellow">One</option>
        <option value="2" style="background-color:red">Two</option>
        <option value="3" style="background-color:green">Three</option>
      </select>
    </td>
  </tr>
</table>

现在我可以在下拉框中设置选项的背景颜色。我需要的是使用所选的选项颜色设置单元格的背景颜色。 我在互联网上搜索了很多，但找不到类似的东西。 Fiddle

Answer 1

您已将颜色应用于所选元素。相反，您应该将其应用于选择元素的父元素。我将 .parentNode 添加到了 javascript。

td {
padding: 1rem; /* Just to make the color better visible */
}

<table>
  <tr>
    <td>
      <select onchange="this.parentNode.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
        <option value=""></option>
        <option value="1" style="background-color:yellow">One</option>
        <option value="2" style="background-color:red">Two</option>
        <option value="3" style="background-color:green">Three</option>
      </select>
    </td>
  </tr>
</table>