Question

尝试了几个小时后却无法正确操作，如何检查另一个选择中是否已选择了一个选项。在哪里为所有新创建的select动态创建具有相同类的表单行。

下面是动态创建表单后的样子。

<select class="tank_id" name="Form[tank_id][]">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="tank_id" name="Form[tank_id][]">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="tank_id" name="Form[tank_id][]">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

我想要实现的是确保提交的数据没有重复。我的问题是找出下面的先前选择中是否已经选择了一个选项，即我尝试过但未实现任何效果的js。

        $(".tank_id").on('change', function(){

            var inputs = $('.tank_id');

            var result = inputs.filter(function(i,el){
                return inputs.not(this).filter(function() {
                    return this.value === el.value;
                });
            });

            if (result.length > 0) {
                alert('match found')
            }

        });

Answer 1

尝试一下

$(".tank_id").on('change', function() {
  var current = $(this);
  var inputs = $('.tank_id').not(this);

  var result = inputs.filter(function(i, el) {
    return $(current).prop("selectedIndex") === $(el).prop("selectedIndex");
  });

  if (result.length > 0) {
    alert('Error: Selected Already')
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select class="tank_id" name="Form[tank_id][]">
  <option hidden>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="tank_id" name="Form[tank_id][]">
  <option hidden>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="tank_id" name="Form[tank_id][]">
  <option hidden>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Answer 2

这只会检查您当前选择的值是否已在另一个列表中选择。因此，如果您在前两个下拉列表中选择了2，然后在最后一个下拉列表中选择了1，那么最后一个不会给出错误消息。

$(".tank_id").on('change', function() {
  var currentValue = $(this).val();
  var inputs = $('.tank_id').not(this);

  var matches = inputs.filter(function() {
    return $(this).val() === currentValue;
  });

  if (matches.length > 0) {
    alert('The current selectbox value is already selected somewhere else!');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="tank_id" name="Form[tank_id][]">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="tank_id" name="Form[tank_id][]">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="tank_id" name="Form[tank_id][]">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

如何检查是否在动态创建的表单行中选择了相同的选项

2 个答案: