Question

感谢您抽出宝贵时间帮助我解决这个问题，我是javascript初学者，我无法弄清楚如何根据具体内容创建一个激活不同注册表单的下拉菜单用户选择。

因此，在我的代码中，我有3种不同的注册表单：水管工，承包商和电工。当用户选择其中一个时，注册表格应更改为水管工注册表格或电工注册表格等。

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

这是一个小提琴： http://jsfiddle.net/d0e6t7o4/1/

HTML：

水管工人承包商电工

  @headless = Headless.new
  @headless.start    

  @profile = Selenium::WebDriver::Firefox::Profile.new
  if @use_proxy
    p = "#{@proxy}:#{@proxy_port}"
    @profile.proxy = Selenium::WebDriver::Proxy.new(
      :http     => p,
      :ftp      => p,
      :ssl      => p
    )
  end
  @profile['general.useragent.override'] = @user_agent_string
  @profile["browser.privatebrowsing.autostart"] = true
  @driver = Selenium::WebDriver.for :firefox, :profile => @profile

使用Javascript：

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

和CSS：

var select = $( '#dropdown' );

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

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

showTab( select.val() );

Answer 1

您必须确保<option> value和<div> id中的大小写相同，否则它无法正常工作。< / p>

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

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

你有div：

<div id="Plumber">

这不起作用。

其次，除了容器之外，你隐藏了所有 <div>（基本上是整个表单）。您需要隐藏仅其他容器<div>。

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

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

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

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

1 个答案: