显示带有下拉按钮的现有div？

Question

我为要单独单击所选服务时要显示的所有选择元素（衬衫，裤子，西装）有单独的div。 这意味着，当我单击其中任何一个时，只有那个div才会显示。 我在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> 

我对元素中的每个项目都使用change（），但我不能包括衬衫的div。 就像，当我从选择服务中按“衬衫”时，我希望显示“衬衫” div。

Answer 1

基本上，您应该先隐藏要在其间切换的所有字段。 为此，我添加了一个默认情况下隐藏所有这些元素的类。 此类还允许我一次选择所有元素。

在那之后，您必须确保将<select>选项绑定到要切换的字段。 在此示例中，我们可以使用选择的值，并使每个值与要切换的字段的id对应。

然后，当选择一个新项目时，您将使用用于选择所有可切换元素的类，并使用所有这些元素的.hide() 。 将它们全部隐藏之后，您可以使用我们选择的.show()我们选择的元素。

如果您有任何疑问，请告诉我。

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