JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<select multiple id="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="mango">Mango</option>
    <option value="grape">Grape</option>
    <option value="watermelon">watermelon</option>
</select>

<input type="submit" id="submit">

JavaScript

/* Multi select and unselect with splice */

var selected="";
var statusSelected="";
$(function() {
    $('#fruits').change(function(e) {
        selected = $(e.target).val();        
        if(selected != null){
            if(selected.length>1){
               var abc= jQuery.inArray("apple", selected);
               if(abc !="-1"){
                   //return false;
                   $('#fruits option:eq(' + abc + ')').removeAttr("selected");
                   var itemtoRemove = "apple";
                   selected.splice(abc,1);
               }
            }
        }
       console.log(selected);
    }); 
     
    $('#submit').click(function(e) {
      var valLength =  $('#fruits :selected').length;
        //console.log(slectedValues);
        console.log(valLength);
    $('#fruits :selected').each(function (i, selected) {
         if (i + 1 == valLength) {
             statusSelected += $(selected)
             .val();
         } else {
             statusSelected += $(selected)
             .val() + ",";
         }
     });
    if(statusSelected==""){
        statusSelected="outboundScheduled,outboundInProgress,outboundReadyToDepart,outboundDeparted";}
          console.log(statusSelected);
    });
   
});