Question

我有两个let newView = UIView(frame: CGRect(...) let rec = UITapGestureRecognizer(target: self, action: #selector(MyVC.myRecognizerFunction)) newView.addGestureRecognizer(rec)下拉列表，如下所示。

select2

基本上，我想在更改另一个下拉列表时从一个下拉列表中删除所选值。这是我在Jquery中的代码。

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-2">
                <label>Fruits</label>
            </div>
            <div class="col-md-4">
                <select asp-for="SelectedFruit" asp-items="@Model.FruitList" asp-class="form-control"></select>
            </div>

            <div class="col-md-2">
                <label>Vegetable(s)</label>
            </div>
            <div class="col-md-4">
                <select asp-for="SelectedVegetable" asp-items="@Model.VegetableList" asp-class="form-control"></select>
            </div>
        </div>
    </div>
</div>

但是随着一个更改触发另一个事件，这最终会进入一个连续循环，依此类推。我还有其他选择吗？

Answer 1

由于您以编程方式触发trigger('change')事件，因此触发问题的触发部分（change）会触发该元素的change事件处理程序，因此它会重复发生（因为在这两个处理程序中都触发了该事件））。

要解决此问题，请仅在值是非空字符串时触发它。

$('#SelectedFruit').on('change', function (e) {
 if(this.value !== '')
   $('#SelectedVegetable').val('').trigge('change');
});

$('#SelectedVegetable').on('change', function (e) {
 if(this.value !== '')
   $('#SelectedFruit').val('').trigge('change');
});

$('#example1,#example2').select2({
  placeholder: 'Select a month'
});
$('#example1').on('change', function() {
  if (this.value !== '')
    $('#example2').val('').change();
})
$('#example2').on('change', function() {
  if (this.value !== '')
    $('#example1').val('').change();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example1" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>
<select id="example2" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

或者另一种方法是在更新值之后重新初始化select2。

$('#SelectedFruit').on('change', function (e) {
   $('#SelectedVegetable').val('').select2('destroy').select2();
});

$('#SelectedVegetable').on('change', function (e) {
    $('#SelectedFruit').val('').select2('destroy').select2();
});

$('#example1,#example2').select2({
  placeholder: 'Select a month'
});
$('#example1').on('change', function() {
  $('#example2').val('').select2('destroy').select2();
})
$('#example2').on('change', function() {
  $('#example1').val('').select2('destroy').select2();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example1" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>
<select id="example2" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

参考：How to set selected value of jquery select2?

Answer 2

这就是我要做的事情。我不确定这是否是正确的方法，但这是否对我有用。我基本上是在重载控件，而不是操纵值。

$('#SelectedFruit').on('change', function (e) {
    $('#SelectedVegetable').select2('destroy').val("").select2();   
});

$('#SelectedVegetable').on('change', function (e) {
    $("#SelectedFruit").select2('destroy').val("").select2();
});

我也应该在this answer.

处记下这个想法，

在选择另一个select2下拉菜单时重置一个select2下拉菜单的元素

2 个答案: