Question

我是一名新手网络开发人员，我正在尝试创建一个html表单，该表单将根据先前的选择动态生成子字段。例如，使用下面的片段，如果用户选择“每个中心”，则表单将为中心的值提供另一个子字段。类似地，对于“每个客户”，提供选项。但是，Global不需要或没有任何子字段。

<!DOCTYPE html>
<html>
    <body>
<form action="process.php" method="post"> 
    <fieldset>
      <b>Analysis Level</b>
      <select name="level"> 
        <option>Global</option>
        <option>Per Center</option>
        <option>Per Client</option>
      </select></br></br>

如果有人能指导我朝着正确的方向前进，我将非常感激。感谢。

Answer 1

你必须在Javascript中这样做。从长远来看，最简单的方法是使用类似jQuery的东西。

你可以用更简单的方式做到这一点，这一次，用这样的东西：

  <b>Analysis Level</b>
  <select name="level" onchange="didChangeLevel(this);"> 
    <option value="global">Global</option>
    <option value="center">Per Center</option>
    <option value="client">Per Client</option>
  </select></br></br>
  <b><span id="label"></span></b>
  <input type="text" id="extrafld" name="extra" style="display: none;" />

从视觉上看，它与以前大致相同。但是现在每次更改选择时，都会调用一个函数。你写这样的函数：

show the field适当地
设置标签

didChangeLevel（combo）{ var value = combo.options [combo.selectedIndex] .value; var field = document.getElementById（'extrafld'） var label = document.getElementById（'label'）; switch（value）{ 案例'全球'： field.style.display ='none'; 打破; 案例'中心'： label.innerHTML ='中心名称：'; field.style.display ='block'; 打破; 案例'客户'： label.innerHTML ='客户名称：'; field.style.display ='block'; 打破; } 返回; }

当您收到表单PHP方面时，您只需检查select的值是什么。如果它不是“全局”，请查找$_POST['extra']以包含额外的字段值。

Answer 2

希望这是朝着正确方向迈出的一步

http://jsfiddle.net/k4bLC/

$(document).ready(function(){
    $('#center').hide();
    $('#client').hide();
    $('#level').change(function(){
        var value = $(this).val();
        switch(value){
            case('global'):
                $('#center').hide();
                $('#client').hide();
                break;
            case('center'):
                $('#center').show();
                $('#client').hide();
                break;
            case('client'):
                $('#center').hide();
                $('#client').show();
                break;
        }
    });
});

html表单的动态子字段

2 个答案: