changing the selected value of element using jquery

Question

I have the below html and 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>

Using the above jquery, I want to change the value of the dropdown in tdcolor td element and the same should reflect on the web page. But, I've not had luck with above code, however console.log output of the selected value says the new value is updated but the same isn't reflected.

Could you please help me in solving this issue? I want to change the color of tdcolor based on the colors passed in result map.

Many Thanks in advance.

@gurvinder372, thanks.. actually I'm using `checklist` in other js functions. So, cannot change it. Will check on `data-id`. Thanks — harshavmb, May 04 '17 at 07:59
I converted your code to a snippet and it didn't work, so I added `.trim()` thinking it was because I changed the formatting. A quick look at how it was before the edit shows that the format wasn't changed for that part. `$(this).text() === key` `.text()` will include spaces, so make sure it's `.trim()`'d. Rest still didn't work with this change though. — freedomn-m, May 04 '17 at 08:18
Can you explain why you stringify true/false to get a true / **falsey** value? `if (JSON.stringify($(this).text().trim() === key))` rather than just `if ($(this).text().trim() === key)` — freedomn-m, May 04 '17 at 08:19
yeah, I tried with `if ($(this).text().trim() === key)`, it worked in my application. It didn't work in `jsfiddler` so I had to use `JSON.stringify` and it worked. Not sure with the reason though. — harshavmb, May 04 '17 at 08:21
I'm doing this on a page load action, fetching the values of `result` from database and setting up in webpage. — harshavmb, May 04 '17 at 08:22
Possible duplicate of [Html duplicated "id"](http://stackoverflow.com/questions/22059438/html-duplicated-id) — John, May 04 '17 at 08:25

score 1 · Accepted Answer · answered May 04 '17 at 08:22

Don't use duplicate ids, id value should be unique. Use another attribute like data-id instead.

Also, no need to use nested iterations

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>

Many Thanks, will try to add this to my application. This is working in fiddler. Will let you know. — harshavmb, May 04 '17 at 08:24

Jeet · Answer 2 · 2017-05-04T08:32:15.283

$('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>

changing the selected value of element using jquery

2 Answers2