javascript - 当选择选项已被另一个选择选项选择时，如何禁用选择选项中的值

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 中，我使用所有选择选项的类触发事件更改，然后我将获取选择和 id 的值。获取值后，我检查 val 是否为空，如果不为空，那么我将对所有选择使用每个函数并获取它们的 id 属性，以便我可以将其与选择的 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>