Question

我有一个html表单，其中包含许多用户填写的选项（姓名，电子邮件等），然后我会有一个下拉列表要求用户选择“样式A”或“样式B”

如果选择“样式A”，则此样式将具有特定大小，如果选择“样式B”，则此样式将具有特定大小等。

但是，对于任何超过xhtml / css和最小PHP / javascript（非常小）的东西，我都是一个完整的菜鸟，所以我不确定如何完成这个。当用户选择样式a / b或者用户是否必须选择样式，单击“提交”并加载另一个表单时，是否会显示这些选项？我不确定如何做到这一点，所以在我的书中有任何作用！

任何人都可以帮我解决问题吗？

感谢您对此有任何帮助。

Answer 1

一种好方法是在表单周围放置一个容器，例如：

<div id="style_container" class="styleA">
  <form> .. </form>
</div>

然后您可以在css文件中输入条目，例如：

div.styleA input
div.styleB input

最后，在您的页面上使用jQuery，假设您有一个选项字段，其中的选项具有样式类名称的值，您可以这样做：

$("select#style_select").change(function(){
  $("div#style_container").removeClass("styleA styleB");
  $("div#style_container").addClass($(this).val());
});

因此，您只需要在该容器div上更改该类，并且整个页面应根据您的css规则进行更新。

Answer 2

您可以使用Javascript完全执行此操作。样式'A'将是一个类（或一组类），样式'B'将是另一个类（或集）。

当用户选择样式'A'时，请运行您要更新的所有元素以及样式'A'中的相应类。如果用户选择样式'B'，请为其执行相同的操作。

<强> HTML

<select id = 'styler' name = 'styler'>
    <option value = 'a'>Style A</option>
    <option value = 'b'>Style B</option>
</select>

<强>的Javascript

（为简单起见使用jQuery）

$(function() {
    $('#styler').bind("change", function() {
        if($(this).val() == 'a')
            $(".bClass").removeClass("bClass").addClass("aClass");
        else
            $(".aClass").removeClass("aClass").addClass("bClass");
    });
});

Answer 3

您已经提供了2个解决方案：

单一表单，当选择样式选项时，将显示与特定样式相关的子选项，最简单的方法是使用JavaScript函数（让我们称之为switch_size_display）显示或隐藏可用选项。样式选择已更改。
多页表单，这对您的访问者来说更难，更不可取，这可以使用Cookie，Get或Post来完成：在第1页，用户将选择将保存在变量上的“样式”（cookie） / get / post），在第2页上，将向用户显示相对于变量上找到的样式的“大小”。

你正在学习Javascript和PHP，这些解决方案都是非常好的练习。最后一件事是你永远不要相信用户输入，如果你要创建一个可在线（不是本地）的网站，请确保你严格验证来自URL，Cookies等的任何内容...

选择$ this，显示$ that - 如何使用表单执行此操作？

3 个答案: