使用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元素中下拉列表的值，同样应该反映在网页上。但是，我对上面的代码没有好运，但是所选值的console.log输出表示新值已更新，但不会反映出来。

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

非常感谢提前。

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>

Answer 2

$('select').change(function(){ 
    var value = $(this).find("option:selected").text();
    var txtVal = $(this).parent().parent().find('#checklist').text();
  console.log(txtVal.trim()+':'+value.trim());
});

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