带选择框的相关标签

Question

我对选中框的相关标签有疑问。 我有一个包含3个值的选择框：

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

或查看下面的图片

我只有一个选择框可见其他任何东西，因为我没有选择任何东西。 当我现在选择AB值时，请参见下图：

然后我想得到这个选定值的相关标签（有一些输入字段）！ 见下图。

它必须像radiobuttons一样工作。如果我选择AA然后我得到另一个相关的标签，之前选择的标签将是不可见的。 当我选择值“0”（无）时，所有标签都必须是不可见的。

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