javascript - 使用 jquery 更改元素的选定值

Question

我有以下 html 和 jquery:

var result = {
  "TPS on Desktop": "Green",
  'TPS on mobile': 'Amber'
};

for (var key in result) {
  $('td[id="checklist"]').each(function() {
    if (JSON.stringify($(this).text().trim() === key)) {
      $(this).closest('tr').find('td[class="tdcolor"] select option:selected').val(result[key]);
      console.log(key + ' : ' + $(this).closest('tr').find('td[class="tdcolor"] select option:selected').val());
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
    <th><b>CheckList</b></th>
    <th><b>Health</b></th>
</tr>
<tr>
    <td id="checklist">
        TPS on Desktop
    </td>
    <td class="tdcolor">
        <select class="health">
            <option value=0>Select</option>
            <option value="1">Green</option>
            <option value="2">Amber</option>
            <option value="3">Red</option>
        </select>
    </td>
</tr>
<tr>
    <td id="checklist">
        TPS on Mobile
    </td>
    <td class="tdcolor">
        <select class="health">
            <option value=0>Select</option>
            <option value="1">Green</option>
            <option value="2">Amber</option>
            <option value="3">Red</option>
        </select>
    </td>
</tr>
</table>

使用上面的 jquery，我想更改 tdcolor td 元素中下拉列表的值，并且同样的值应该反射(reflect)在网页上。但是，我对上面的代码没有运气，但是所选值的 console.log 输出显示新值已更新，但未反射(reflect)出来。

您能帮我解决这个问题吗？我想根据 result 映射中传递的颜色更改 tdcolor 的颜色。

提前非常感谢。

Answer 1

不要使用重复的 ID，id 值应该是唯一的。请改用其他属性，例如 data-id。

此外，无需使用嵌套迭代

var result = {
  "TPS on Desktop": "Green",
  'TPS on Mobile': 'Amber'
};

$('td[data-id="checklist"]').each(function() 
{
    var value = result[ $(this).html().trim() ];
    $(this).closest('tr').find('td[class="tdcolor"] select option:contains(' + value + ')').prop("selected", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
  <tr color="23145">
    <th><b>CheckList</b></th>
    <th><b>Health</b></th>
  </tr>
  <tr>
    <td data-id="checklist">
      TPS on Desktop
    </td>
    <td class="tdcolor">
      <select class="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
      </select>
    </td>
  </tr>
  <tr>
    <td data-id="checklist">
      TPS on Mobile
    </td>
    <td class="tdcolor">
      <select class="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
      </select>
    </td>
  </tr>
</table>