showing an existing div with drop-down button?

Admin 1
Viewed 30

i have separate div(s) for all the select elements(shirt, pant, suit) which i want to show when i click on selected service separately. That means, when i click any one of them, then only that div will gonna show. I am seeking answer in JQuery. TIA

$(function(){
  $('#selectService').change(function() {
    alert($(this).val());
    // I don't want these alert, i want to show those div(s)
    // separately when each one them is clicked. Like the alert() does.
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="orderClone" class="row">
  <div class="table-responsive">                               
    <table class="table table-striped">                           
      <tr>
        <th>Service</th>
      </tr>
      <tr>
      <td>
        <select id="selectService" name="service[]" class="form-controlservice">
          <option disabled="" selected="">Select Service</option>
          <option id="one" value="shirt">Shirt</option>
          <option value="pant">Pant</option>
           <option value="suit">Suit</option>
         </select>
      </td>
     </tr>
    </table>
  </div>
</div>
<div class="col-md-4">
<h4><b>Shirt</b></h4>
<hr/>
  <div class="form-group required">                                   <label class="control-label">Body</label>
    <input type="text" class="form-control" name="body" />
  </div>
  <div class="form-group required">
    <label class="control-label">Shoulder</label>
    <input type="text" class="form-control" name="shoulder" />
   </div>
   <div class="form-group required">
     <label class="control-label">Neck</label>
     <input type="text" class="form-control" name="neck" />
   </div>
</div>
<div class="col-md-4"> 
<h4><b>Pant</b></h4>
<hr/>
<div class="form-group required">                                   <label class="control-label">Length</label>          
  <input type="text" class="form-control" name="length" />
 </div>
 <div class="form-group required">
  <label class="control-label">Thigh</label>
  <input type="text" class="form-control" name="thigh" />
  </div>
</div>
<div class="col-md-4"> 
<h4><b>Suit</b></h4>
<hr/>
<div class="form-group required">                                   <label class="control-label">Name</label>          
  <input type="text" class="form-control" name="length" />
 </div>
 <div class="form-group required">
  <label class="control-label">Name</label>
  <input type="text" class="form-control" name="thigh" />
  </div>
</div>

i use change() for each of the items in the element but i can't include the div(s) of the shirt. Like, when i press the 'shirt' from the select service, i want that 'shirt' div to display.

css html jquery javascript
1 Answers

Basically, you should start by hiding all of the fields that you want to toggle between. I do this by adding a class that hides all of these elements by default. This class also allows me to select all elements at once.

After that, you have to make sure that you have something to tie the <select> options to the fields that you want to toggle. In this example, we can use the value selected and make each of them correspond to the id of the field that you want to toggle.

Then, when a new item is selected, you use the class that we use to select all toggleable elements and .hide() all of them. After hiding them all, you can use the one we selected to .show() the element we selected.

Let me know if you have any questions.

$(function() {
  $('#selectService').change(function() {
    /* When a new item is selected, hide all fields again, ... */
    $('.hidden-fields').hide();

    /* ... then find which field was selected and show it. */
    var $target = $(this).val();
    $('#' + $target).show();
  });
});
/* Hide all of the fields by default */

.hidden-fields {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="orderClone" class="row">
  <div class="table-responsive">
    <table class="table table-striped">
      <tr>
        <th>Service</th>
      </tr>
      <tr>
        <td>
          <select id="selectService" name="service[]" class="form-controlservice">
            <option disabled="" selected="">Select Service</option>
            <option id="one" value="shirt">Shirt</option>
            <option value="pant">Pant</option>
            <option value="suit">Suit</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
</div>
<div class="col-md-4 hidden-fields" id="shirt">
  <h4><b>Shirt</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Body</label>
    <input type="text" class="form-control" name="body" />
  </div>
  <div class="form-group required">
    <label class="control-label">Shoulder</label>
    <input type="text" class="form-control" name="shoulder" />
  </div>
  <div class="form-group required">
    <label class="control-label">Neck</label>
    <input type="text" class="form-control" name="neck" />
  </div>
</div>
<div class="col-md-4 hidden-fields" id="pant">
  <h4><b>Pant</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Length</label>
    <input type="text" class="form-control" name="length" />
  </div>
  <div class="form-group required">
    <label class="control-label">Thigh</label>
    <input type="text" class="form-control" name="thigh" />
  </div>
</div>
<div class="col-md-4 hidden-fields" id="suit">
  <h4><b>Suit</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Name</label>
    <input type="text" class="form-control" name="length" />
  </div>
  <div class="form-group required">
    <label class="control-label">Name</label>
    <input type="text" class="form-control" name="thigh" />
  </div>
</div>

user_50264380
Related