選択されている場合はアラートが他の選択肢で既に選択されている

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> 

この変更機能は、他の選択オプションが選択されている場合、このオプションを無効にします。私はそれが動作していないことを警告するために変更するとき。他の選択オプションで選択されている場合にのみ警告する方法。あなたは以下のようにjQueryのセレクタで行くここ

$('.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

、

注：同じ値が上記のあなたのサンプルで選択されているので、私は初期選択値として空の要素を追加しました。

$('.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>

Answer 2

このリンクを見てください：

$('.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