Question

我有这个代码与bootstrap 4（最新），它在IE 11和FireFox中工作正常，但在Safari och Mac中没有。如果我在Safari的下拉列表中选择了某些内容，则内容始终是隐藏的。

如果我选择＆＃34;选择发票地址＆＃34;，我想隐藏地址，如果＆＃34; Service AB＆＃34;被选中我想要显示地址。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<select class="custom-select d-block w-100 mb-3" id="invoice-select">
  <option class="case" value="">Select Invoice address</option>
  <option class="" value="" data-toggle="collapse" data-target="#invoice1">Service AB</option>
</select>
<div class="invalid-feedback">
  Please select a invoice address.
</div>
<div class="collapse indent" id="invoice1">
  <input type="text" class="form-control mb-3" id="invoice-site" name="invoice-site" value="invoice Center" placeholder="invoice Center" readonly>
  <input type="text" class="form-control mb-3" id="invoice-street" name="invoice-street" value="test invoice street" placeholder="test invoice street" readonly>
  <div class="row">
    <div class="col-6 mb-3">
      <input type="text" class="form-control mb-3" id="invoice-zip-code" name="invoice-zip-code" value="111 22" placeholder="111 22" readonly>
    </div>
    <div class="col-6 mb-3">
      <input type="text" class="form-control mb-3" id="invoice-city" name="invoice-city" value="NY" placeholder="NY" readonly>
    </div>
  </div>
</div>

＆＃13;

Answer 1

通过一个小的jquery onChange动作如何做到这一点。我在select选项上添加了一个值以获得引用。（在Chrome上测试，Safari）

$('#invoice-select').on('change',function(){
  $('#invoice1').toggle(this.value == "Service AB");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<select class="custom-select d-block w-100 mb-3" id="invoice-select">
  <option class="case" value="">Select Invoice address</option>
  <option class="" value="Service AB" data-toggle="collapse" data-target="#invoice1">Service AB</option>
</select>
<div class="invalid-feedback">
  Please select a invoice address.
</div>
<div class="collapse indent" id="invoice1">
  <input type="text" class="form-control mb-3" id="invoice-site" name="invoice-site" value="invoice Center" placeholder="invoice Center" readonly>
  <input type="text" class="form-control mb-3" id="invoice-street" name="invoice-street" value="test invoice street" placeholder="test invoice street" readonly>
  <div class="row">
    <div class="col-6 mb-3">
      <input type="text" class="form-control mb-3" id="invoice-zip-code" name="invoice-zip-code" value="111 22" placeholder="111 22" readonly>
    </div>
    <div class="col-6 mb-3">
      <input type="text" class="form-control mb-3" id="invoice-city" name="invoice-city" value="NY" placeholder="NY" readonly>
    </div>
  </div>
</div>

选择，折叠选项在Safari中不起作用

1 个答案: