CODEWITHSUNDEEP
javascriptjquery
masdap
masdap

Reputation: 161

How to disable value in select option when it already selected by another select option

So, i have a simple form like this:

<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>

When i click the button the field will regenerate select option, and the value is from database

select_inv function:

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

My Question: How can i disable value in select option when it already selected by another select option?

Upvotes: 0

Views: 418

Answers (1)

Dee
Dee

Reputation: 166

Try this if this is what you need.

i just created a sample dropdown and in my jquery i trigger the event change using the class of all select option then i will get the value of the select and id. after getting the value i check the val if it is empty or not if not empty then i will use the each function for all the select and get their id attribute so i can compare it with the id of the select and if their id is not the same then i will disabled the option with the same value of the selected dropdown.

and i use focus event for getting the previous value so i can reset whether the user change the value of the selected option.

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

Upvotes: 2

Related Questions