javascript - 从选择页面加载 Bootstrap 表单

Question

我有一张注册表。当有人从选择菜单中单击某些内容时，我只需要在选择菜单后面的同一页面中加载 Bootstrap 表单。我应该隐藏表单直到有人在选择菜单中单击该元素吗？

这是我的代码。

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

我需要加载此表单，有人点击菜单中的公寓。

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

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

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

我需要遵循什么方法？

Answer 1

看看this jsfiddle :

我给了你公寓的 wrapper id <div class="col-md-12" id="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;
  }
});

别忘了隐藏您的 #apartment :

#apartment {
  display: none;
}