0

我是一名新手 Web 开发人员，正在尝试创建一个 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>

如果有人能引导我朝着正确的方向前进，我将不胜感激。谢谢。

4

2 回答 2

0

您将不得不在 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;" />

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

  • 适当地显示字段

  • 设置标签

    didChangeLevel(combo) { var value = combo.options[combo.selectedIndex].value; var field = document.getElementById('extrafld') var label = document.getElementById('label'); switch(value) { case 'global': field.style.display = 'none'; 休息; case 'center': label.innerHTML = '中心名称：'; field.style.display = 'block'; 休息; case 'client': label.innerHTML = '客户名称：'; field.style.display = 'block'; 休息; } 返回; }

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

于 2013-09-16T21:04:09.300 回答
0

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

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;
        }
    });
});
于 2013-09-16T21:15:14.447 回答