javascript - 如果已在其他选择选项中选择了所选选项，则发出警报

Question

如果在其他选择选项值中选择了选项，我需要提醒。如果选中，我禁用了该选项，但由于禁用属性，它无法插入数据库。所以我只想提醒一下。

<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>

<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>

如果选择了其他选择选项，此更改功能将禁用该选项。当我更改为提醒它不起作用时。如何仅在其他选择选项中选中时才发出警报。

$('.input_slip_no').on('change', function() {
  var selected_options = $('.input_slip_no').map(function(){
    return this.value
  }).get();

  $('.input_slip_no option').each(function(index) {
    $(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
  });
});

Answer 1

这里使用 jQuery 选择器，如下所示，

注意:我添加了空元素作为初始选择值，因为在上面的示例中选择了相同的值。

$('.input_slip_no').change(function(){
  
  var selected = $(this).val();
  if(selected) {
    var otherSelected = $('.input_slip_no').not($(this)).find('option[value="' + selected + '"]:selected');
    
    if(otherSelected.length > 0) {
      alert('Option is already selected');
      $(this).val('');
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">     
  <option value=""></option>    
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">         
  <option value=""></option>    
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>

<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">        
  <option value=""></option>     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">     
  <option value=""></option>        
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>