Remove selection of multiple selectbox is not working

Question

In jquery muliselect box remove attribute selected from selected values is not working. There is no errors shows in the console

the working example

the problem was

$("#mltyslct option[value='"+foo[i]+"']").prop("selected", false);

is not working.But the code is not terminated.

also tried

$("#mltyslct option[value='"+foo[i]+"']").removeAttr("selected");

but no change

Here is html the code

<select id="mltyslct" multiple="multiple" size="5">
    <option value="A">AA</option>
    <option value="B">AB</option>
    <option value="C">AC</option>
    <option value="1">11</option>
    <option value="2">12</option> 
     <option value="3">13</option>
</select>

and js

$( document ).ready(function() {
    $("select").multiselect();
});

var strAppnd='';
var selectValue='';
var flag=true;
$( "#mltyslct" ).change(function() {
var foo = []; 

$('#mltyslct :selected').each(function(i, selected){
         foo[i] = $(selected).val(); 
    });

for (var i = 0; i < foo.length; ++i) {  
    selectValue = foo[i].substring(0, 1);  
}

    if(selectValue=="A"){         
        alert('alphabet');
        strAppnd=strAppnd+'A';
        selectValue=''
        flag=false;
    }   
    else if(selectValue=="1"){
        alert('number'); 
        if(flag==false){
        strAppnd=strAppnd+'1';
        }
        selectValue=''
     }
    console.log('val of appndStrng:'+strAppnd.substring(0, 2));
      if(strAppnd.substring(0, 2)=='A1'|| strAppnd.substring(0, 2)=='1A'){

      for (var i = 0; i < foo.length; i++) {

        $("#mltyslct option[value='"+foo[i]+"']").prop("selected", false);
           console.log('inside Booom:'+foo[i]);
      }  
    } 
});

Answer 1

This appears to be working:

$(document).ready(function() {
  $("select").multiselect();
});

var strAppnd = '';
var selectValue = '';
var flag = true;
$("#mltyslct").change(function() {
  var foo = [];

  $('#mltyslct :selected').each(function(i, selected) {
    foo[i] = $(selected).val();
  });

  for (var i = 0; i < foo.length; ++i) {
    selectValue = foo[i].substring(0, 1);
  }

  if (selectValue == "A") {
    alert('alphabet');
    strAppnd = strAppnd + 'A';
    selectValue = ''
    flag = false;
  } else if (selectValue == "1") {
    alert('number');
    if (flag == false) {
      strAppnd = strAppnd + '1';
    }
    selectValue = ''
  }
  console.log('val of appndStrng:' + strAppnd.substring(0, 2));
  if (strAppnd.substring(0, 2) == 'A1' || strAppnd.substring(0, 2) == '1A') {

    for (var i = 0; i < foo.length; i++) {

      $("input[type='checkbox'][value='" + foo[i] + "']").prop( "checked", false );
      console.log('inside Booom:' + foo[i]);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" type="text/css" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<select id="mltyslct" multiple="multiple" size="5">
  <option value="A">AA</option>
  <option value="B">AB</option>
  <option value="C">AC</option>
  <option value="1">11</option>
  <option value="2">12</option>
  <option value="3">13</option>
</select>

Answer 2

$('#mltyslct :selected').removeAttr("selected");