从select页面加载引导表单。

I have a register form. I just need to load bootstrap form in same page behind the select menu when someone click something from select menu. Should I hide form until someone click that item in select menu right?

我有登记表。当有人从选择菜单中点击某样东西时，我只需要在选择菜单后面的相同页面中加载引导表单。我应该隐藏表单直到有人在选择菜单中点击那个项目吗?

This is my code.

这是我的代码。

<div class="form-group">
    <select class="form-control menu">
        <option>Select category*</option>
        <option>Apartment</option>
        <option>Lands</option>
    </select>
</div>

I need to load this form someone click Apartment in the menu.

我需要加载这个表单，有人在菜单中点击公寓。

<form>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Size(sqft)">
                        /div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="No of bedrooms">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="No of bathrooms">
                    </div>
                </div>
            </div>
        </div>
</form>

I tried play with this code. But it redirect to another pages.

我试着用这段代码。但它重定向到另一个页面。

<script>
   $('select.menu').change(function(e){
      // this function runs when a user selects an option from a <select> element
      window.location.href = $("select.menu option:selected").attr('value');
   });
</script>

What method do I need to follow?

我需要遵循什么方法?

3 个解决方案

#1

Have a look at this jsfiddle:

看看这个jsfiddle:

I gave your wrapper of your apartment an id <div class="col-md-12" id="apartment">.

我给你的公寓包装了一个id

。

So I added following jQuery to toggle your html of your apartment:

所以我添加了下面的jQuery来切换你的公寓的html:

$('select.menu').change(function(){
  // this function runs when a user selects an option from a <select> element
  switch($(this).find("option:selected").prop('value')) {
    case '1': $('#apartment').show(); break;
    default: $('#apartment').hide(); break;
  }
});

And don't forget to hide your #apartment:

别忘了把你的公寓藏起来:

#apartment {
  display: none;
}

#2

window.location.href will redirect you to the new page. You can just hide your form before user make a select change or get it dynamically with jQuery.load() function.

window.location。href会将您重定向到新页面。您可以在用户进行选择更改之前隐藏表单，或者使用jQuery.load()函数动态地获取它。

#3

Let's say your HTML,

假设你的HTML,

<div class="form-group">
  <select class="form-control menu">
    <option>Select category*</option>
    <option>Apartment</option>
    <option>Lands</option>
   </select>
</div>

by default let the form is in display:none.

默认情况下，让表单显示:none。

Jquery,

<script>
   $('select.menu').change(function(e){
      // this function runs when a user selects an option from a <select> element
      window.location.href = $("select.menu option:selected").attr('value');

     if($(this).val == "Apartment"){
        $('form').show();
     }else{
        $('form').hide();
     }
  });
</script>

#1