跟进领域php / html表格

Question

我正在尝试为选择下拉菜单创建后续字段。

例如，在第一个下拉菜单中，我有（'yes'=> 1，'no'=> 2，'nothing'=> 3）。 我希望在我点击选择其中一个选项后，随后出现的字段发生变化。 例如：如果我选择“是”，则下面的字段将是一个选择下拉菜单，否则，它将是一个文本区域，而对于什么都将是什么。

我已经为自己尝试了一些代码，但是它不起作用，因为我不知道如何在选择某些内容后立即更新以下字段。 我尝试过这样的事情：

if (select == 1) {
    echo "$select2";
} else if (select == 2) {
    echo "<input type='text' name='textarea1'/>";
}​

但我不知道如何使页面更新字段...

请帮我

谢谢

Answer 1

这个想法是，您想根据上一个问题的答案使用JavaScript显示/隐藏问题。 这称为决策树 。 如果您使用Google ，它们就会来。 您可以找到许多示例和库，这些示例和库可以为您完成大部分繁重的工作。

如果您想构建自己的，这是一种非常简单的方法。 这不是可扩展的解决方案，但是它应该为您提供如何工作的基本概念。

的HTML

<label>Do you want this?
    <select name="choices" id="choices">
        <option value="1">Yes</option>
        <option value="2">No</option>
        <option value="3" selected>Nothing</option>
    </select>
</label>
<div id="choices-followup">
    <div id="followup1">
        <label>
            How bad do you want this?
            <select>
                <option>Give it to me now!</option>
                <option>Meh...</option>
            </select>
        </label>
    </div>
    <div id="followup2">
        <label>Why not?<br />
            <textarea></textarea>
        </label>
    </div>
</div>​

的JavaScript

// Whenever the user changes the value of
// the element with ID "choices", perform
// this function.
$('#choices').on('change', function() {

    // Grab the choice value
    var choice = $(this).val();

    // Cache the "choices-followup" object.
    // Every time to you call $('anything'), jQuery
    // goes through the entire DOM looking for that
    // object. Prevent this by making the lookup
    // once, and caching the value.
    var choices_followup = $('#choices-followup');

    // No matter what the choice, hide all possible
    // follup fields.
    $('div', choices_followup).hide();

    // Also, reset their values.
    $('select, textarea, input', choices_followup).val('');

    // If this, then that, etc.
    switch(choice) {
        case '1':
            $('#followup1').show();
            break;
        case '2':
            $('#followup2').show();
            break;
    }
});​

的CSS

#choices-followup > div { display: none; }​