JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<form  id="send_parent">
  <select id='rec' name="rec " class="selectpicker" multiple >
    <option value="1" >A</option>
    <option value="2" >B</option>
    <option value="3" >C</option>
    <option value="4" >D</option>
    <option value="5" >E</option>
    <option value="6" >F</option>
  </select>
         
   <input type="text" name="msg" id="msg">
       
   <button type="submit" id="save">SAVE</button>
</form>

JavaScript

$("#rec").on("change",function(){
	update();
});

function update() {
	var selected=[];
 	$('#rec option:selected').each(function()
  	{
    	selected[$(this).val()]="@"+$.trim($(this).text());
    });
 $("#msg").val(selected);
}



 $("#send_parent").submit(function() 
   {
     var formData = new FormData();
     formData.append('rec', rec.value);
     formData.append('msg', msg.value);
     jQuery.ajax(
      {
        type: "POST",
        url: "<?php echo base_url(); ?>" + "value/send_value",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) 
          {
              console.log(res);
          },
        error: function(errResponse) 
          {
           console.log(errResponse);
          }
     });
     return false;

 });