根據下拉菜單更改注冊表格？

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的大小寫相同，否則將不起作用。

例如，在<select> ，您具有：

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

而你有股利：

<div id="Plumber">

這行不通。

---

其次，除了容器的那些（基本上是整個表單）之外，您還隱藏了所有的<div> 。 您只需要隱藏其他容器<div> 。

為此，我向每個包含<div>的類添加了formDiv類，並且僅隱藏了這些類：

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

---

請參閱JSFiddle.net上的工作示例。