根據下拉菜單更改註冊表單嗎？

Question

感謝您花時間幫我弄清楚這個問題，我是一名JavaScript初學者，我無法弄清楚如何創建一個下拉菜單，根據用戶的選擇激活不同的註冊表單。

所以在我的代碼中，我有3種不同的註冊形式：水管工，承包商和電工。當用戶選擇其中一個時，註冊表格應改爲水管工註冊表格或電工註冊表格等。

請幫我弄清楚爲什麼我的javascript沒有顯示其他註冊表單？

這裏有一個小提琴： http://jsfiddle.net/d0e6t7o4/1/

HTML：

管道工 承包商 電工

<div id="plumber"> 
      <!-- Register Form --> 

    <p>Plumber Signup</p> 
      <div class="user_register1"> 



       <form> 
        <label>Plumbers Name</label> 
        <input type="text" /> 
        <br /> 

        <label>Email</label> 
        <input type="email" /> 
        <br /> 

        <label>Password</label> 
        <input type="password" /> 
        <br /> 


        <div class="action_btns"> 

         <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div> 
        </div> 
       </form> 
      </div> 
</div> 
</div> 

<div id="Contractor"> 

    <p>Contractor Signup</p> 

      <div class="user_register2"> 

       <form> 
        <label>Contractor Name</label> 
        <input type="text" /> 
        <br /> 

        <label>Email</label> 
        <input type="email" /> 
        <br /> 

        <label>Password</label> 
        <input type="password" /> 
        <br /> 


        <div class="action_btns"> 

         <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div> 
        </div> 
       </form> 
      </div> 
</div> 
</div> 

<div id="electrician"> 

    <p>Electrician Signup</p> 
      <div class="user_register3"> 

       <form> 
        <label>Electrician Name</label> 
        <input type="text" /> 
        <br /> 

        <label>Email</label> 
        <input type="email" /> 
        <br /> 

        <label>Password</label> 
        <input type="password" /> 
        <br /> 


        <div class="action_btns"> 

         <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div> 
        </div> 
       </form> 
      </div> 
</div> 


</div> 

</body> 

的Javascript：

var select = $('#dropdown'); 

function showTab(name) { 
    name = '#' + name; 
    $('div').not(name).hide(); 
    $(name).show(); 
} 

select.change(function() { 
    showTab($(this).val()); 
}); 

showTab(select.val()); 

和CSS：

.user_register label {display: block; margin-bottom:5px;} 
.user_register input[type="text"], .user_register input[type="email"], .user_register input[type="password"] {display: block; width:90%; padding: 10px; border:1px solid #DDD; color:#666;} 
.user_register input[type="checkbox"] {float:left; margin-right:5px;} 
.user_register input[type="checkbox"]+label {float:left;} 

.user_register .checkbox {margin-bottom: 10px; clear: both; overflow: hidden;} 

/* User Login Form */ 
.user_login {display: block;} 
.user_login label {display: block; margin-bottom:5px;} 
.user_login input[type="text"], .user_login input[type="email"], .user_login input[type="password"] {display: block; width:90%; padding: 10px; border:1px solid #DDD; color:#666;} 
.user_login input[type="checkbox"] {float:left; margin-right:5px;} 
.user_login input[type="checkbox"]+label {float:left;} 

.user_login .checkbox {margin-bottom: 10px; clear: both; overflow: hidden;} 
.forgot_password {display:block; margin: 20px 0 10px; clear: both; overflow: hidden; text-decoration: none; color:#ED6347;} 


.btn {padding:10px 20px; background: #F4F4F2;} 
.btn_red {background: #ED6347; color: #FFF;} 

.btn:hover {background: #E4E4E2;} 
.btn_red:hover {background: #C12B05;} 

a.btn {color:#666; text-align: center; text-decoration: none;} 
a.btn_red {color: #FFF;} 

.one_half {width:50%; display: block; float:left;} 
.one_half.last {width:45%; margin-left:5%;} 

Answer 1

你必須確保資本在<option>value相同的S和<div>id S，否則將無法正常工作。

例如，在你的<select>，您有：

<option value="plumber" selected="selected">Plumber</option> 

而且你必須在div：

<div id="Plumber"> 

這是行不通的。

---

其次，你是隱藏所有的<div>小號除了那些容器（基本上是整個窗體）。您需要隱藏只有另一個容器<div> s。

要做到這一點，我添加了類formDiv到每個這些含<div>的S，和僅藏的那些：

$('div.formDiv').not("#" + name).hide(); 

---

參見在JSFiddle.net工作示例。