JSFiddle - React, Tailwind, and code Playground

by Kleber Mota

HTML

<form class="form" role="form" action="/permissao/cadastra" method="post">
<p> <input type="text" name="nome" class="form-control" placeholder="Nome" autofocus></p>
      		
<table class="bordered">
 <tr>
  <td>
	<select class="form-control all" size="10" multiple="multiple">
        <option class="item" value="1">teste 1</option>
        <option class="item" value="2">teste 2</option>
        <option class="item" value="3">teste 3</option>
        <option class="item" value="4">teste 4</option>
        <option class="item" value="5">teste 5</option>
	</select>
  </td>			
  <td>
<p><button type="button" class="btn btn-lg btn-default" id="for_left"> << </button></p><p><button type="button" class="btn btn-lg btn-default" id="for_right"> >> </button></p>
  </td>		
  <td>
   <select name="select_two" class="form-control lista" size="10" multiple="multiple">
   </select>
  </td>
 </tr>
</table>
<p><button type="submit" class="btn btn-primary">Cadastrar</button> </p>
</form>    
<div id="result"></div>

JavaScript

$(document).on('submit', '.form', function (event) {
	event.preventDefault();

	var $form = $( this ),
	url = $form.attr( "action" );
    
	if($("select.lista").length) {
		jQuery('select.lista').find('option.item').each(function(){
	        $(this).attr('selected', 'selected');
	    });
	}
	
	var posting = $.post( url, $(this).serialize() );
    
    $("#result").append("<h3>results from posting</h3>");
    $("#result").append("<h3>url -> "+url+"</h3>");
    $("#result").append("<h3>.serialize() -> "+$(this).serialize()+"</h3>");

	/*posting.done(function( data ) {
		$("#"+data).css("display", "block");
				
		$(".form").each (function(){
			this.reset();
		});
	});*/
});

$('#for_right').click(function(e) {
    var selectedOpts = $('.all option:selected');
    if (selectedOpts.length == 0) {
        e.preventDefault();
    }

    $('.lista').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
});

$('#for_left').click(function(e) {
    var selectedOpts = $('.lista option:selected');
    if (selectedOpts.length == 0) {
        e.preventDefault();
    }

    $('.all').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
});