问题描述:

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?

网友答案:

Have a look at this jsfiddle:

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

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

$('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;
}
网友答案:

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.

网友答案:

Let's say your 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.

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> 
相关阅读:
Top