CODEWITHSUNDEEP
javascriptjqueryhtml
harshavmb
harshavmb

Reputation: 3872

changing the selected value of element using jquery

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.

Upvotes: 1

Views: 83

Answers (2)

Jeet
Jeet

Reputation: 80

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

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

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>

Upvotes: 1

Related Questions