Question

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

Answer 1

假设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/

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

Answer 2

你可能想要查看任何可用的优质服务器端工具，例如asp.net，php等...你也可以使用javascript。

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

Answer 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');
        }
    });
});

Html中的条件格式？

3 个答案: