2013-12-11 24 views
25

Làm cách nào để bật lạiChay tất cả giá trị đã chọn trong menu thả xuống nhiều lựa chọn của tôi. Đã sử dụng plugin here. Cố gắng sử dụng những điều sau đây nhưng tôi nghĩ rằng tôi đang trên đường đua saibootstrap multiselect nhận giá trị đã chọn

$('#multiselect1').multiselect({ 
     selectAllValue: 'multiselect-all', 
     enableCaseInsensitiveFiltering: true, 
     enableFiltering: true, 
     maxHeight: '300', 
     buttonWidth: '235', 
     onChange: function(element, checked) { 
      var brands = $('#multiselect1 option:selected'); 
      var selection = []; 
      $(brands).each(function(index, brand){ 
       selection.push(brand); 
      }); 

      console.log(selection); 
     } 
    }); 

tìm thấy nó

$('#multiselect1').multiselect({ 
    selectAllValue: 'multiselect-all', 
    enableCaseInsensitiveFiltering: true, 
    enableFiltering: true, 
    maxHeight: '300', 
    buttonWidth: '235', 
    onChange: function(element, checked) { 
     var brands = $('#multiselect1 option:selected'); 
     var selected = []; 
     $(brands).each(function(index, brand){ 
      selected.push([$(this).val()]); 
     }); 

     console.log(selected); 
    } 
}); 

Trả lời

28

giải pháp những gì tôi tìm thấy để làm việc trong trường hợp của tôi

$('#multiselect1').multiselect({ 
    selectAllValue: 'multiselect-all', 
    enableCaseInsensitiveFiltering: true, 
    enableFiltering: true, 
    maxHeight: '300', 
    buttonWidth: '235', 
    onChange: function(element, checked) { 
     var brands = $('#multiselect1 option:selected'); 
     var selected = []; 
     $(brands).each(function(index, brand){ 
      selected.push([$(this).val()]); 
     }); 

     console.log(selected); 
    } 
}); 
+0

+1 cho giải pháp tuy nhiên bạn đã gặp lỗi trong câu lệnh đã chọn. bạn đang đẩy danh sách giá trị tùy chọn thay vì giá trị dưới dạng chuỗi. bạn muốn xóa các dấu ngoặc kèm theo. – tbradley22

22

Phiên bản ngắn hơn:

$('#multiselect1').multiselect({ 
    ... 
    onChange: function() { 
     console.log($('#multiselect1').val()); 
    } 
}); 
+0

Rực rỡ! Cảm ơn nhiều. – adamj

+0

Thật không may, điều này không hoạt động trong IE11 – AlexM

+0

Làm việc trong IE11 cho tôi –

12

hiệu quả hơn, do ít tra cứu DOM:

$('#multiselect1').multiselect({ 
    // ... 
    onChange: function() { 
     var selected = this.$select.val(); 
     // ... 
    } 
}); 
0

Trong trang Html của bạn xin vui lòng thêm

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test the multiselect with ajax</title> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <!-- Bootstrap multiselect --> 
    <link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <div class="container"> 
     <br> 

     <form method="post" id="myForm"> 

     <!-- Build your select: --> 
     <select name="categories[]" id="example-getting-started" multiple="multiple" class="col-md-12"> 
      <option value="A">Cheese</option> 
      <option value="B">Tomatoes</option> 
      <option value="C">Mozzarella</option> 
      <option value="D">Mushrooms</option> 
      <option value="E">Pepperoni</option> 
      <option value="F">Onions</option> 
      <option value="G">10</option> 
      <option value="H">11</option> 
      <option value="I">12</option> 
     </select> 
     <br><br> 
     <button type="button" class="btnSubmit"> Send </button> 

     </form> 

     <br><br> 
     <div id="result">result</div> 
    </div><!--container--> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <!-- Bootstrap multiselect --> 
    <script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script> 

    <!-- Bootstrap multiselect --> 
    <script src="ajax.js"></script> 

    <!-- Initialize the plugin: --> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

     $('#example-getting-started').multiselect(); 

     }); 
    </script> 

    </body> 
</html> 

Trong trang ajax.js của bạn xin vui lòng thêm

$(document).ready(function() { 
    $(".btnSubmit").on('click',(function(event) { 
    var formData = new FormData($('#myForm')[0]); 
    $.ajax({ 
     url: "action.php", 
     type: "POST", 
     data: formData, 
     contentType: false, 
     cache: false, 
     processData:false, 
     success: function(data) 
     { 
     $("#result").html(data); 

     // To clear the selected options 
     var select = $("#example-getting-started"); 
     select.children().remove(); 
     if (data.d) { 
      $(data.d).each(function(key,value) { 
      $("#example-getting-started").append($("<option></option>").val(value.State_id).html(value.State_name)); 
      }); 
     } 
     $('#example-getting-started').multiselect({includeSelectAllOption: true}); 
     $("#example-getting-started").multiselect('refresh'); 

     }, 
     error: function() 
     { 
     console.log("failed to send the data"); 
     } 
    }); 
    })); 
}); 

Trong hành động của bạn. trang php thêm

echo "<b>You selected :</b>"; 

    for($i=0;$i<=count($_POST['categories']);$i++){ 

    echo $_POST['categories'][$i]."<br>"; 

    } 
2
$('#multiselect1').on('change', function(){ 
    var selected = $(this).find("option:selected"); 
    var arrSelected = []; 
    selected.each(function(){ 
     arrSelected.push($(this).val()); 
    }); 
}); 
Các vấn đề liên quan