如果已在其他选择选项中选择了已选择警报选项

时间:2016-12-19 07:33:10

标签: javascript jquery html select

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

<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);
  });
});

2 个答案:

答案 0 :(得分:3)

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

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

&#13;
&#13;
$('.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('');
    }
  }

});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

请看一下这个链接:

$('.ddControl').change(function(){
    for(var i=0;i<$('.ddControl').length;i++){
  debugger;
    if($(this).attr('id') != $($('.ddControl')[i]).attr('id'))
    {
        if($(this).val() == $($('.ddControl')[i]).val())
      {
        alert('Option is already selected');
      }
    }
  }
})

Demo