如何在已由另一个选择选项选择的情况下禁用选项中的值

Question

所以，我有一个这样的简单形式：

<div class="form-group">
<label class="">No Inventaris</label>
<div id="container">
    <input type="button" name="noInv" class="form-control" id="add_field" value="Klik untuk membuat text field baru"><br>
    <script type="text/javascript">
    var count = 0;
    $(function(){
        $('#add_field').click(function(){
            count += 1;
            $('#container').append(
                '<strong >No Inv Barang Ke ' + count + '</strong><br />' 
                + '<select id="field_' + count + '" name="fields[]' + '"  class="form-control no_inv"><?php $noInv = $this->modelku->select_inv() ?> <?php foreach($noInv->result() as $inv){ ?> <option value="<?php echo $inv->no_inv ?>"><?php echo $inv->no_inv ?></option><?php } ?></select><br>' );

        });
    });
    </script> 

</div>

当我单击该按钮时，该字段将重新生成选择选项，该值来自数据库

select_inv功能：

public function select_inv()
{
    $this->db->select("no_inv");
    $this->db->from('detail_barang');
    $this->db->where("kondisi = 'Ada' ");
    $query = $this->db->get();
    return $query;
}

我的问题：当选择选项已被另一个选择选项选中时，如何禁用选项中的值？

Answer 1

如果这是你需要的话，试试这个。

我刚刚创建了一个示例下拉列表，在我的jquery中，我使用所有select选项的类触发事件更改，然后我将获得select和id的值。获取值后，我检查val是否为空，如果不为空，那么我将使用每个函数进行所有选择并得到它们的id属性，这样我就可以将它与select的id进行比较，如果它们的id不是同样，我将禁用具有所选下拉列表相同值的选项。

我使用焦点事件来获取前一个值，这样我就可以重置用户是否更改所选选项的值。

 $( document ).ready(function() {
 
 $('body').on('click','#add_field',function(){
            count += 1;
            
            
            
            $('#container').append(
                '<strong >No Inv Barang Ke ' + count + '</strong><br />' 
                + '<select id="field_' + count + '" name="fields[]' + '"  class="form-control no_inv select_alternate"> <option value="">select</option><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select><br></select><br>' );

        });

var count =0;
var previous;
var selectedData = [];
$('body').on('click','.select_alternate',function(){
      previous = this.value;
     
});


$('body').on('change','.select_alternate',function(){
    var val = this.value;
    var id = $(this).attr('id');
    
    if(val != ''){
    
        $(".select_alternate").each(function(){
           var newID = $(this).attr('id');
           if(id != newID){
              $('#'+newID).children('option[value="' + val + '"]').prop('disabled',true);
               $('#'+newID).children('option[value="' + previous + '"]').prop('disabled',false);
               
               selectedData.splice($.inArray(val, selectedData),1);
           }else{
              selectedData.push(val);
           
           }
        
        });

        
    }else{

      $(".select_alternate").each(function(){
           var newID = $(this).attr('id');
           if(id != newID){
              $('#'+newID).children('option[value="' + previous + '"]').prop('disabled',false);
              
           }
        
        });
    
    }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="">No Inventaris</label>
<div id="container">
    <input type="button" name="noInv" class="form-control" id="add_field" value="Klik untuk membuat text field baru"><br>
   
</div>