Question

我有一张桌子。我在列表中有两个选项。当用户单击第二个选项时，应显示更多行/数据/新列表。怎么做？

<table width="1000" border="1">
  <tr>
    <td>SIGNUP</td>
    <td>
    <select>
    <option>As teacher</option>
    <option>As student</option>
    </select>

    </td>
  </tr>
  <tr>
    <td>First Name</td>
    <td><input name="" type="text" size="30"></td>
  </tr>
  <tr>

如果用户选择“学生”，则表格中也应显示更多参数。

感谢

Answer 1

第1步：为选择事件编写Javascript处理程序
步骤2：启动AJAX连接以检索数据第二个列表基于第一个列表中的选择标准。或者，您可以在页面加载时和存储中检索此数据它在一个合适的数据对象中，然后在此时访问它。
步骤3：创建另一个HTML选择控件以包含第二个数据。这个控件可以通过HTML创建，最初隐藏或创建活动时从头开始的Javascript。
步骤4：使用在步骤2中检索到的数据填充新的第二个选择控件。

要成功完成上述每个步骤，您需要了解Javascript事件处理程序，AJAX和DOM操作。考虑使用jQuery或其他框架来简化其中的一些步骤。

Answer 2

这只能通过某种形式的Javascript实现（我将在我的示例中使用jQuery，因为它更容易）。

为了显示更多选项，必须在onchange事件中显示/隐藏它们，如下所示：

$("#op1").change(function(){

    $(".options2").fadeOut();
    $(".options3").fadeOut();

    if($(this).val()=="1")
    {
        $(".options2").fadeIn();
    }
    else if($(this).val()=="2")
    {
        $(".options3").fadeIn();
    }

});

在此示例中，#op1是第一个选择; onchange如果值为1，则会显示div.options2，另一个选择的容器;如果它的值为2，它将显示div.options3，即第三个选择的容器。

options2和options3都可以硬编码到页面中，也可以在必要时附加（使用.append()）。

如何根据用户选择显示更多选项

2 个答案:

JSFiddle

注意：您需要导入jQuery才能生效。