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

Question

我为所有选择元素(衬衫、裤子、西装)设置了单独的 div，当我分别单击所选服务时，我想显示这些元素。这意味着，当我点击其中任何一个时，只有那个 div 会显示。我在 JQuery 中寻找答案。 时间差

$(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。您要切换的字段。

Then, when a new item is selected, you use the class that we use to select all toggleable elements and .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>