Member Avatar for jean_5

I have the following code:

if (object.GroupBy == "Cities")
    $("body").children().find("td:first[name=Name]>").html("City");
if (object.GroupBy == "Banks")
    $("body").children().find("td:first[name=Name]>").html("Banks");
if (object.GroupBy == "User")
    $("body").children().find("td:first[name=Name]").html("Users"); 

<tr class="form-list-table-header">
    <td class="" name="Name"></td>
    <td class="" name="Total">Total</td>
</tr>

<div><span>Group By</span></div>
    <select class="combobox" name="GroupBy">
          <option value="Cities">Cities</option>
          <option value="Banks">Banks</option>
          <option value="Users">Users</option>
    </select>
</div>

If the user select Cities, the td is not with the selected option. For example, in the combobox is selected the cities value.
So, in the header of the table will appear:

| Cities | Total |

  • 1 Contributor
  • 1 Reply
  • 133 Views
  • 22 Minutes Discussion Span
  • Latest Post Latest Post by jean_5

Dani AI

Generated

The issue was not the combobox itself but the way the header cell was targeted and updated. Adding a small, stable marker to the header (as ended up doing) is a pragmatic fix — it makes the selector reliable and the intent clear. A few small improvements make that approach robust: read the option's display text, update with plain text (not HTML), initialize on load, and avoid fragile traversal chains.

Example (keeps selectors explicit and cached):

$(function() {
  var $select = $('.group-by-select');          // a stable selector for the dropdown
  var $header = $('tr.form-list-table-header .header-name').first();

  function updateHeader() {
    var label = $select.find('option:selected').text();
    $header.text(label);                         // safe: uses text(), not html()
  }

  $select.on('change', updateHeader);
  updateHeader();                                // set initial label on page load
});

Practical tips and gotchas:

  • Prefer .first() or .eq(0) over the :first pseudo-selector for clarity and performance.
  • Use quoted attribute selectors when needed (for example, [name="something"]).
  • Keep display text (what users see) separate from machine values; use data- attributes if you need both.
  • If the table or select are injected via AJAX, bind with delegated handlers or run the sync after insertion.
  • Use <th> for header cells (semantic and better for accessibility) instead of <td>.

Quick troubleshooting checklist:

  • In the console, run your selector and check the element count.
  • Ensure the script runs after DOM ready or after the fragment is inserted.
  • Log the selected option text to confirm the value/text mapping before updating the DOM.
Member Avatar for jean_5

I made it and have worked

if (object.GroupBy == "City")
    $('.change:first').html('City');
if (object.GroupBy == "Banks")
    $('.change:first').html('Banks');
if (object.GroupBy == "Users")
    $('.change:first').html('Users');

<select class="combobox" name="GroupBy">
    <option value="City">City</option>
    <option value="Banks">Banks</option>
    <option value="Users">Users</option>
</select>

<table class="form-list-table" width="100%">
    <tr class="form-list-table-header">
         <td class="change" name="Name"></td>
         <td class="" name="Total">Inclusões</td>
    </tr>
</table>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.