选择$this，显示$that -如何在表单中做到这一点

Select $this, display $that - how to do it with a form?

本文关键字：表单 这一点 this 显示 that 选择      更新时间：2023-09-26

我有一个html表单，用户可以填写很多选项(姓名，电子邮件等)，然后我将有一个下拉菜单，要求用户选择"样式a"或"样式B"。

如果"样式A"被选中，那么这个样式就会有特定的尺寸，如果"样式B"被选中，那么这个样式就会有特定的尺寸，等等。

然而，当涉及到xhtml/css和最小的PHP/javascript(非常小)的任何东西时，我是一个完全的新手，所以我不确定究竟如何完成这一点。当用户选择样式a/b时，是否会显示这些选项，或者用户必须选择样式，单击提交，然后加载另一个表单?我不确定这到底是怎么做到的，所以在我的书里什么都可以!

谁能帮我解决这个问题?

非常感谢你的帮助。

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

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

那么你可以在你的css文件中加入如下条目:

div.styleA input
div.styleB input
最后，在您的页面上使用jQuery，假设您有一个select字段，其中的选项具有样式类名的值，您可以这样做:

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

所以你只需要改变容器div上的类，整个页面应该根据你的css规则更新。

完全可以用Javascript完成。风格"A"将是一个类(或一组类)，风格"B"将是另一个类(或一组)。

当用户选择样式'A'时，遍历你想要更新的所有元素，以及它们在样式'A'中对应的类。如果用户选择样式'B'，则对其执行相同操作。

<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");
    });
});

你已经给出了两个解决方案:

  1. 单个表单，当样式选项被选中时，与特定样式相关的子选项将被显示，完成此操作的最简单方法是使用JavaScript函数(让我们称之为switch_size_display)在样式选择被更改时显示或隐藏可用选项。
  2. 多页面的形式，这是更困难的，不太可取的访问者，这可以完成使用cookie, Get或Post:在第1页，用户将选择"样式"，这将被保存在一个变量(cookie/Get/Post)，在第2页，用户将与"尺寸"相对的样式显示在变量中。

如果你正在学习Javascript和PHP，这两个解决方案都是非常好的练习。最后一件事是，你永远不应该相信用户输入，如果你正在创建一个在线(而不是本地)的网站，请确保你严格验证任何来自URL, cookie等…

相关文章：