bootstrap multiselect get selected values

Question

How do I get back on onChange all selected values in my multiselect dropdown  Used plugin here  Trying to use the following but I think I m on the wrong track      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                       found it       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

User · Answer

multiselect1   on  change   function        var selected     this  find  option selected        var arrSelected           selected each function           arrSelected push   this  val

User · Answer

In your Html page please add    lt  DOCTYPE html gt   lt html lang  en  gt     lt head gt       lt meta charset  utf-8  gt       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt title gt Test the multiselect with ajax lt  title gt        lt  -- Bootstrap -- gt       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com font-awesome 4 4 0 css font-awesome min css  gt       lt  -- Bootstrap multiselect -- gt       lt link rel  stylesheet  href  http   davidstutz github io bootstrap-multiselect dist css bootstrap-multiselect css  gt        lt  -- HTML5 Shim and Respond js IE8 support of HTML5 elements and media queries -- gt       lt  -- WARNING  Respond js doesn t work if you view the page via file    -- gt       lt  -- if lt IE 9  gt         lt script src  https   oss maxcdn com libs html5shiv 3 7 2 html5shiv js  gt  lt  script gt         lt script src  https   oss maxcdn com libs respond js 1 4 2 respond min js  gt  lt  script gt       lt   endif -- gt     lt  head gt     lt body gt       lt div class  container  gt         lt br gt          lt form method  post  id  myForm  gt            lt  -- Build your select  -- gt           lt select name  categories    id  example-getting-started  multiple  multiple  class  col-md-12  gt             lt option value  A  gt Cheese lt  option gt             lt option value  B  gt Tomatoes lt  option gt             lt option value  C  gt Mozzarella lt  option gt             lt option value  D  gt Mushrooms lt  option gt             lt option value  E  gt Pepperoni lt  option gt             lt option value  F  gt Onions lt  option gt             lt option value  G  gt 10 lt  option gt             lt option value  H  gt 11 lt  option gt             lt option value  I  gt 12 lt  option gt           lt  select gt           lt br gt  lt br gt           lt button type  button  class  btnSubmit  gt  Send  lt  button gt          lt  form gt          lt br gt  lt br gt         lt div id  result  gt result lt  div gt       lt  div gt  lt  --container-- gt        lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt       lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt       lt  -- Include all compiled plugins  below   or include individual files as needed -- gt       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt       lt  -- Bootstrap multiselect -- gt       lt script src  http   davidstutz github io bootstrap-multiselect dist js bootstrap-multiselect js  gt  lt  script gt        lt  -- Bootstrap multiselect -- gt       lt script src  ajax js  gt  lt  script gt        lt  -- Initialize the plugin  -- gt       lt script type  text javascript  gt          document  ready function                  example-getting-started   multiselect                    lt  script gt      lt  body gt   lt  html gt    In your ajax js page please add     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     lt option gt  lt  option gt    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                                 In your action php page add     echo   lt b gt You selected   lt  b gt       for  i 0  i lt  count   POST  categories     i          echo   POST  categories    i    lt br gt

User · Answer

more efficient  due to less DOM lookups       multiselect1   multiselect                  onChange  function             var selected   this  select val

User · Answer

the solution what I found to work in my case      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

User · Answer

In my case i was using jQuery validation rules with  submitHandler function and submitting the data as new FormData form       Select Option    lt select class  selectpicker  id  branch  name  branch  multiple  multiple  title  Of Branch  data-size  6  required gt     lt option disabled gt Multiple Branch Select lt  option gt     lt option value  Computer  gt Computer lt  option gt     lt option value  Civil  gt Civil lt  option gt     lt option value  EXTC  gt EXTC lt  option gt     lt option value  ETRX  gt ETRX lt  option gt     lt option value  Mechinical  gt Mechinical lt  option gt   lt  select gt    lt input type  hidden  name  new branch  id  new branch  gt    Get the multiple selected value and set to new branch input value  amp  while submitting the form get value from new branch  Just replace hidden with text to view on the output   lt input type  text  name  new branch  id  new branch  gt       Script  jQuery   Ajax     lt script gt        document  ready function                branch   on  change   function              var selected     this  find  option selected      get current selected value           var arrSelected         Array to store your multiple value in stack           selected each function                arrSelected push   this  val       Stack the value                             new branch   val arrSelected     It will set the multiple selected value to input new branch                     lt  script gt

User · Answer

multiselect1   on  change   function        var selected     this  find  option selected            var arrSelected               selected each function             arrSelected push   this  val                        The problem with the above selected each statement is that          there is no iteration value           this  val   is all selected items  not an iterative item value         With each iteration the selected items will be appended to         arrSelected like so                   arrSelected  0   item0   item1   item2          arrSelected  1   item0   item1   item2            You need to get the iteration value              selected each  idx  val    gt            arrSelected push val value                  arrSelected  0   item0           arrSelected  1   item1          arrSelected  2   item2

User · Answer

Shorter version       multiselect1   multiselect               onChange  function             console log     multiselect1   val

[jquery] bootstrap multiselect get selected values

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to multi-select