2009-08-20 13 views
0

私のフォームにHTMLテーブルがあります。列1にはドロップダウンと非表示範囲があり、列2には非表示範囲が含まれています。ユーザーが選択した後、両方のスパンを表示してドロップダウンを非表示にする必要があります。 4つのドロップダウン(テーブルの行)を持っている場合、私はこのjQueryヘルプ - 現在の表のセルと隣接セルのスパンを見つける

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

のようなコードを使用して他のアプリに似何かを行っています。コードの再利用のために、私は同じハンドラを使いたいと思います。私は4人の別個のハンドラを書くことができると思うが、それは無駄に思える。

行のHTMLは、私は、私はそれらを必要とする場合、完全なクライアントはIDを制御していこの

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

のように見えます。とにかく、この1つの関数内に行を処理する方法はありますか?必要なすべてのドロップダウンにクライアント変更イベントハンドラを追加し、この単一の機能を指摘しました。彼らはすべて正しく配線されていることを確認しました。 lbl1 textxをddl selectedValueに、bd1を隣接セルにddl selectedTextにします。 jQueryの指導者の助けを借りていただければ幸いです。みんなありがとう!サンディエゴの

乾杯、 〜CK

答えて

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

はそれを旋回を与えます。また、CSSを直接​​変更したり、クラスを変更して管理することもできます。

$( "td select")の代わりに$( "#table-id-name select")を使用する行ではなく、一度にテーブル全体を対象にすることができます(これはページ全体のすべてのTDを選択します) 。

+0

ニース - おそらく二重の親の代わりに最も近い( "tr")コールします。 –

+0

私は選択された要素の値/テキストをどこに選択しているのかわかりませんし、スパンのテキストをそれぞれに設定しています。 – tvanfosson

1

リスト/スパンクラスを指定して、それらを識別するのに役立つが、そうでない場合は実行できます。

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