jQuery help - find span in current table cell and adjacent cell

Question

I have an HTML table on my form. Column 1 contains a dropdown and a hidden span, Column 2 contains a hidden span. I need to show both spans and hide the drop down after a user makes a selection. I have done something similiar in other apps using code like this

var ddl_change = function() {
  var ddl = this;
  $("lbl1").text(ddl.options[ddl.selectedIndex].text).show();
  $(ddl).hide();
}

if have 4 dropdowns (rows in the table). For code reuse I would like to use the same handler. I suppose I could write 4 seperate handlers, but that seems like a waste.

The html for a row looks like this

<tr>
  <td>
      <asp:DropDownList runat="server" ID="ddlbc1" />
      <asp:Label runat="server" ID="lbl1" />
  </td>
  <td>
       <asp:Label runat="server" ID="bd1" />
  </td>
</tr>

I have the full client controls Id's if I need them. Anyways, is there a way within this single function to handle any row? I added client change event handlers to all the necessary drop downs and pointed them to this single function. I verified they are all correctly wired up. I want lbl1 textx to be the ddl selectedValue, and bd1, in the adjacent cell, to have ddl selectedText. Any help from the jQuery guru's would be appreciated. Thanks guys!

Cheers, ~ck in San Diego

Answer 1

$("td select").change(function(e){    
   $(this).hide().parent().parent().find("span").show();
});

Give it a whirl. You could also manage it by directly modifying the CSS, or changing the class.

You could target the entire table at once rather than a row using $("#table-id-name select") instead of the $("td select") (which will select all TD's in the entire page).

Answer 2

If you gave your lists/spans classes that would help to identify them, but it could be done otherwise.

$('table select').change( function() {
      var $this = $(this);
      $this.hide();
      var lbl = $this.next('span');
      var bd = $this.closest('td').next('td').find('span');
      lbl.text( $this.val() ).show();
      bd.text( $this.find('option:selected').text() ).show();
});