jQuery Hilfe - finden Sie Span in aktuellen Tabelle Zelle und benachbarte Zelle

Question

Ich habe eine HTML-Tabelle auf meinem Formular. Spalte 1 enthält ein Dropdown und einen versteckten Bereich, Spalte 2 enthält einen versteckten Bereich. Ich muss beide Spannen anzeigen und das Dropdown ausblenden, nachdem ein Benutzer eine Auswahl trifft. Ich habe etwas ähnlich in anderen Anwendungen getan Codes wie diese

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

wenn haben 4-Dropdown-Listen (Zeilen in der Tabelle). Für die Wiederverwendung von Code möchte ich den gleichen Handler verwenden. Ich denke, ich könnte 4 separate Handler schreiben, aber das scheint eine Verschwendung zu sein.

Die html für eine Zeile wie folgt aussieht

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

Ich habe die volle Client steuert die Id, wenn ich sie brauche. Wie auch immer, gibt es einen Weg innerhalb dieser einzelnen Funktion, um irgendeine Reihe zu behandeln? Ich habe die Event-Handler für die Client-Änderung allen erforderlichen Dropdown-Menüs hinzugefügt und sie auf diese einzelne Funktion ausgerichtet. Ich verifizierte, dass sie alle korrekt verdrahtet sind. Ich möchte lbl1 textx als ddl selectedValue und bd1 in der angrenzenden Zelle als ddl selectedText haben. Jede Hilfe von den jQuery-Gurus wäre willkommen. Danke Leute!

Cheers, ~ ck in San Diego

Answer 1

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

es einen Wirbel geben. Sie können es auch verwalten, indem Sie das CSS direkt ändern oder die Klasse ändern.

Sie können die gesamte Tabelle auf einmal statt einer Zeile mit $ ("# table-id-name select") anstelle von $ ("td select") ausrichten (wodurch alle TDs auf der gesamten Seite ausgewählt werden) .

Answer 2

Wenn Sie Ihre Listen/Spannen Klassen gaben, die helfen würden, sie zu identifizieren, aber es könnte auch anders gemacht werden.

$('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(); 
});