Sortable with Combobox

by Yusril Maulidan Raji

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    <select>
        <option value=""></option>
      <optgroup label="Workorder">
        <option class="column" value="workorder.extkey">WorkOrder ExtKey</option>
        <option class="column" value="workorder.identification">WorkOrder Identification</option>
        <option class="column" value="workorder.identificationusedbyclient">WorkOrder Identification Used By Client</option>
        <option class="column" value="workorder.extraphonenumber">WorkOrder Extra Phone Number</option>
        <option class="column" value="workorder.workdescription">WorkOrder Work Description</option>
        <!-- Workorder Ext Storage -->
      </optgroup>
      <optgroup label="Location">
        <option class="column" value="location.extkey">Location ExtKey</option>
        <option class="column" value="location.name">Location Name</option>
        <option class="column" value="location.address">Location Address</option>
        <option class="column" value="location.zipcode">Location ZipCode</option>
        <option class="column" value="location.city">Location City</option>
        <option class="column" value="location.phonenumber">Location Phone Number</option>
        <option class="column" value="location.gps">Location GPS</option>
        <option class="column" value="location.identification">Location Identification</option>
        <option class="column" value="location.emailaddress">Location Email Address</option>
        <!-- Location Ext Storage -->
      </optgroup>
      <optgroup label="Customer">
        <option class="column" value="customer.extkey">Customer ExtKey</option>
       ...

CSS

#sortable 
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 60%; 
}
#sortable li 
{ 
  margin: 0 3px 3px 3px; 
  padding: 0.4em; 
  padding-left: 1.5em; 
  font-size: 1.4em; 
  height: 18px; 
}
#sortable li span 
{ 
  position: absolute; 
  margin-left: -1.3em; 
}

JavaScript

$( function() {
    $( "#sortable" ).sortable();
  } );
  
$("select").change(function() {
	if($(this).val() != null && $(this).val() != "")
  	$(this).parent().attr('column-value',$(this).val());
    
  	$("select option.column").attr("disabled",false); //enable everything
  	//collect the values from selected;
     var arr = $.map
     (
        $("select option:selected"), function(n)
         {
             return n.value;
         }
     );
     
    $("select option.column").filter(function()
    {
        return $.inArray($(this).val(),arr)>-1;
    }).attr("disabled",true);   
});