Html中的条件格式？答案

【问题标题】：Conditional Formatting in Html?Html中的条件格式？
【发布时间】：2011-08-06 12:43:57
【问题描述】：

我正在编写一个网站，目前正在注册页面上。我有一个下拉框，我想让该下拉框为每个下拉框打开不同的注册信息。例如：如果他们选择了主要用户，它会将他们需要的注册信息从仅用户名和密码更改为用户名、密码、信用卡号和电话号码。或者，如果他们从下拉列表中选择部分用户，它会要求输入用户名密码和电话。任何线索如何在 HTML 或任何其他计算机语言中执行此操作？

【问题讨论】：

这是一个关于如何设计表单的 HTML 问题，还是一个关于如何创建登录/注册系统的编程问题？
将控件添加到 html 中的不同 div 并使用 javascript 根据您的下拉列表调用您需要的 div。

标签： html web formatting conditional-statements

【解决方案1】：

您可能想了解许多可用的服务器端工具，例如 asp.net、php 等...您也可以使用 javascript。

例如，使用 JavaScript，您可以在更改下拉菜单时触发事件，并且在该事件处理程序的代码中，您可以修改 DOM，以便为每个选择显示适当的表单元素。

【讨论】：

【解决方案2】：

假设 html 是这样的：

Type:<br>
one <input type="radio" name="type" id="type-1" value="1" /><br>
two <input type="radio" name="type" id="type-2" value="2" />
<hr>
<form action="." METHOD="POST">
    <input class="second" type="text" name="name" id="name" value="name" />
    <input class="second" type="text" name="email" id="email" value="email" />
    <input class="second" type="text" name="credit-card" id="credit-card" value="credit card" />
</form>

像这样的css：（隐藏除了类型选择之外的所有表单字段）

.second{
    display:none   
}

您可以使用 jQuery javascript 库来动态显示/隐藏所需的表单字段，如下所示：

// when type radio button is pressed
$('#type-1,#type-2').change(function(){

    // hide all form fields
    $('.second').hide()

    // if type is 1
    if($('#type-1:checked').length){

        // show name and email fields
        $('#name,#email').show()

    // else if type is 2
    }else if($('#type-2:checked').length){

        // show name, email and credit-card fields
        $('#name,#email,#credit-card').show()

    }     
})

此处演示：http://jsfiddle.net/rBvLA/

结果必须由服务器端脚本使用您选择的任何语言处理。

【讨论】：

【解决方案3】：

另一个 jQuery 解决方案：

Live Demo

$('#reg_type input[type=radio]').change(function() {
    var type = $(this).attr('class');
    $('#reg_fields div').each(function() {
        if ($(this).hasClass(type)) {
            $(this).show().removeAttr('disabled');
        } else {
            $(this).hide().attr('disabled','disabled');
        }
    });
});

【讨论】：