有條件格式化爲HTML？

Question

我在寫一個網站，我目前正在註冊頁面。我有一個下拉框，我想讓下拉框打開不同的註冊信息。例如：如果他們選擇了主要用戶，它會將他們需要的註冊信息從用戶名和密碼更改爲用戶名，密碼，信用卡號和電話號碼。或者如果他們從下拉列表中選擇部分用戶，它會要求用戶名密碼和電話。任何線索如何在HTML或任何其他計算機語言中做到這一點？

Answer 1

你可能想看看任何可用的優秀服務器端工具，如asp.net，php等......你也可以使用javascript。例如，使用JavaScript，當他們更改下拉菜單並在該事件處理程序的代碼中時，您可能會觸發事件，您可以修改DOM以便爲每個選擇顯示適當的表單元素。

Answer 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/

結果必須由服務器端腳本使用您選擇的任何語言處理。

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