根据下拉菜单更改注册表单？

Question

感谢您花时间帮我解决这个问题，我是 javascript 的初学者，我不知道如何创建一个下拉菜单来激活不同的注册表单取决于用户的选择。

所以在我的代码中，我有 3 种不同的注册表单：管道工、承包商和电工。当用户选择其中之一时，注册表应更改为管道工注册表或电工注册表等。

请帮我弄清楚为什么我的 javascript 没有显示其他注册表单？

这是一个 fiddle： 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 和 <div> id 中的大小写相同，否则将无法正常工作。

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

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

你有 div:

<div id="Plumber">

这行不通。

其次，除了容器（基本上是整个表单）之外，您还隐藏了所有 <div>。您只需要隐藏另一个容器 <div>s.

为此，我将 class formDiv 添加到包含 <div> 的每个中，并且仅隐藏了这些：

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

请参阅 JSFiddle.net 中的工作示例。

根据下拉菜单更改注册表单？

Change sign-up form depending on the drop down-menu?

javascript

html

forms

css

javascript-objects