带选择框的相关标签

Question

我对带有选择框的关联标签有疑问。 我有3个值的选择框：

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

或见下文

我只有以外的选择框可见没有图片，因为我没有什么choiced。 当我选择现在值AB见下图：

的话，我想相关的标签（有一些inputfields）这个选择的价值！ 看到下面的图片。

它必须工作就像单选按钮。如果我选择AA，那么我会得到另一个相关标签，而之前选择的标签将不可见。 当我选择值“0”（Nothing）时，那么所有的标签都是不可见的。

Here the (only) HTML structure，因为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;}​ 

我拿出了多余的代码，因为它不是很清楚。

您不应该使用标签来以这种方式拼凑代码。 :)

More info on using labels