Select2：禁用的选定选项值不起作用

Question

I have module that you will transfer the qty from "warehouse from" to "warehouse to"(Warehouse From & Warehouse To these are my dropdown)

I want put some validation that you cannot longer choose the first selected warehouse coming from "warehouse from"

View

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 input-padding-left">
    <div class="form-group">  
        <label>Document Reference</label>
        <input type="text" name="document_reference" class="form-control">
    </div>
    <div class="form-group">
        <label>From:</label>
        <select class="form-control warehouse" name="warehouse_from" required="required" id="warehouse_from" style="width: 100%;">
            <option></option>
            <option value="0">Unassigned Warehouse</option>
            @if($warehouses)
                @foreach($warehouses as $v => $warehouse)
                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                @endforeach
            @endif
        </select>
    </div>
</div>
<hr>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 input-padding-right">
    <div class="form-group">
        <label>Posting Date</label>
        <input type="text" name="posting_date" class="form-control dates">
    </div>
    <div class="form-group">
        <label>To:</label>
        <select class="form-control warehouse" name="warehouse_to" id="warehouse_to" required="required" style="width: 100%;">
            <option></option>
            @if($warehouses)
                @foreach($warehouses as $v => $warehouse)
                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                @endforeach
            @endif
        </select>
    </div>
</div>

Jquery

$('.warehouse').select2({
        placeholder: "Select a Warehouse",
    });
    $(document).on('select2:select', '#warehouse_from', function(e){
        // $('#warehouse_from  ').on('change',function(){
        //send ajax request
        var id         = $(this).val(); 
        var val        = $('#warehouse_from option:selected').text();
        alert(val);
       $(this).find('option').prop('disabled',false);  
       $(this).find('option[value='+val+']').prop('disabled',true);
        getItemsByWarehouse(id);
        e.preventDefault();
        return false;
    });

Question: Why my disabled didnt work?

Answer 1

You getting the text, not the value of the selected option element:

var val = $('#warehouse_from option:selected').text();
// ...
$(this).find('option[value='+val+']').prop('disabled',true);

It should be:

var val = $('#warehouse_from option:selected').val();
// ...
$(this).find('option[value='+val+']').prop('disabled',true);

Answer 2

My mistake is im disabling the value coming from warehouse_from not in the warehouse_to.

**Jquery**

$(document).on('select2:select', '#warehouse_from', function(e){
        //send ajax request
        var id         = $(this).val(); 
        var val        = $('#warehouse_from option:selected').text();
        alert(id);
       $('select#warehouse_to>option[value="'+id+'"]').attr('disabled','disabled');
        getItemsByWarehouse(id);
        e.preventDefault();
        return false;
    });