jQuery addClass example

Change class name on click in jQuery

HTML

<select multiple id="activeList" class="superSelect">
  <option value="t1" data-changed="no">Option 1</option>
  <option value="t2" data-changed="no">Option 2</option>
  <option value="t3" data-changed="no">Option 3</option>
  <option value="t4" data-changed="no">Option 4</option>
</select>

<div class="buttons">
  <button id="btn_in">>>></button><br/><br/>
<button id="btn_out"><<<</button>
</div>


<select multiple id="inactiveList" class="superSelect">
  <option value="x1" data-changed="no">Thingy 1</option>
  <option value="x2" data-changed="no">Thingy 2</option>
  <option value="x3" data-changed="no">Thingy 3</option>
  <option value="x4" data-changed="no">Thingy 4</option>
</select>

<br/>

<button id="btnSubmit">Submit</button>

CSS

.superSelect{min-height:200px;}
.buttons{display:inline-block}
.flagged{color:red}

JavaScript

$('#btnSubmit').click(function(e){
	e.preventDefault();
  
  var arr = new Array();
  
  // get options from active list
  var options = $('#activeList option');
  options.each(function(i,o){
  	if ($(o).data('changed') == "yes"){
    	var skill = {
      	id: $(o).val(),
        active: 0
      }
      arr.push(skill);
    }
  });
  
  
  // get options from inactive list
  var options = $('#inactiveList option');
  options.each(function(i,o){
  	if ($(o).data('changed') == "yes"){
    	var skill = {
      	id: $(o).val(),
        active: 1
      }
      arr.push(skill);
    }
  });
  
  console.log(arr);
});


$('#btn_in').click(function(){
	var options = $('#activeList option:selected');
  
  options.each(function(i, o){
  	var c = $(o).data('changed');
    if (c == "yes"){
    	$(o).data('changed', 'no');
    	$(o).removeClass('flagged');
    }else{
    	$(o).data('changed', 'yes');
    	$(o).addClass('flagged');
    }
  });
  
  $('#inactiveList').append(options);
  
  //sortOptions('#inactiveList');
		
});




$('#btn_out').click(function(){
	var options = $('#inactiveList option:selected');
  
  options.each(function(i, o){
  	var c = $(o).data('changed');
    if (c == "yes"){
    	$(o).data('changed', 'no');
    	$(o).removeClass('flagged');
    }else{
    	$(o).data('changed', 'yes');
    	$(o).addClass('flagged');
    }
  });
  
  $('#activeList').append(options);
  //sortOptions('#activeList');

});





function sortOptions(selector){
	var options = $(selector + ' option');
  
  options.sort(function(a, b){
  	if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0;
  });
  
  $(selector).empty().append(options);


}