javascript - 删除多个选择框的选择不起作用

Question

在 jquery 多选框中，删除从所选值中选择的属性不起作用。控制台中没有显示错误

工作example

问题是

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

不工作。但代码没有终止。

也尝试过

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

但没有变化

这是html代码

<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>

和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

这似乎有效:

$(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>