jquery - 与选择框关联的标签

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>
​

查询

$("#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;}​

我取出了多余的代码，否则不清楚。

您不应该使用标签以这种方式将代码组合在一起。:)

有关使用标签的更多信息