jquery - Selectboxに関連付けられたラベル

Question

選択ボックスに関連付けられているラベルについて質問があります。3つの値を持つ選択ボックスがあります。

  0
  1 -> AA
  2 -> AB
  3 -> AC

または下の写真を参照してください

何も選択していなかったので、他には何も表示されない選択ボックスしかありません。ここで値ABを選択すると、次の図が表示されます。

次に、この選択した値に関連付けられたラベル（いくつかの入力フィールドを含む）を取得したいと思います！下の写真を参照してください。

ラジオボタンのように機能する必要があります。AAを選択すると、別の関連付けられたラベルが表示され、以前に選択されたラベルは表示されなくなります。値「0」（なし）を選択すると、すべてのラベルが非表示になります。

ここでは（唯一の）HTML構造です。これは、jqueryが私にとって非常に重いためです。例があれば？あなたが私を助けてくれることを願っています

事前にTHX

Answer 1

これを試して...

JSfiddle

HTML

<table>
<tr>
    <td>
        <select id="choice" name="choose">
            <option value="0"></option>
            <option value="1">AA</option>
            <option value="2">AB</option>
            <option value="3">AC</option>
        </select>
    </td>
</tr>

    <tr id="firstLast">
        <td class="mySaisie">&nbsp;Firstname</td>
        <td>
            <input id="name" name="fname" />
        </td>
        <td class="mySaisie">&nbsp;Lastname</td>
        <td>
            <input id="name" name="lname" />
        </td>
    </tr>
    <tr id="addresses">
        <td class="mySaisie">&nbsp;Adresse 1</td>
        <td>
            <input id="adresse" name="fname" />
        </td>
        <td class="mySaisie">&nbsp;Adresse 2</td>
        <td>
            <input id="adresse" name="lname" />
        </td>
    </tr>
</table>
​

JQUERY

$("#choice").on('change',function(){
    var $choice = $('#choice option:selected').val();
    if ($choice == 1) {
         $("#firstLast").show();   
    } else {
        $("#firstLast").hide(); 
    }

    if ($choice == 2) {
         $("#addresses").show();   
    } else {
        $("#addresses").hide(); 
    }
});​

CSS

#firstLast,#addresses {display:none;}​

他に明確ではなかったので、私は余分なコードを取り出しました。

そのようにコードをチャンク化するためにラベルを使用するべきではありません。:)

ラベルの使用に関する詳細情報