How to get Chosen Multiselect selected values under the For Loop

Asked 20/4, 2016 at 4:46 Answered 20/4, 2016 at 5:24

Solved php jquery html jquery-chosen jquery-ui-multiselect

This is my view file code

<?php for($i=0; $i<4; $i++)  { ?>
 <div class="box22">
      <div class="mcm">
           <input type="text" placeholder="Myself" id="coworkers" name="coworkers[]" />
           <span class="bar"></span>
      </div>

      <div class="select2">
       <select id="category_<?php echo $i; ?>" name="category[]" class="chosen-select ref-sel1" multiple >
           <?php
           foreach($genre as $gen){
                echo '<option value='.$gen->genre_id.'>'.$gen->genre_name.'</option>';
           } 
           ?>
       </select>
      </div>
 </div>
<?php } ?>

my script : when i chose one or more from option, it does not comes into script. How to get multiple values under loop

    $(document).ready(function()
    {
        $('form#shortfilm').submit(function(e) 
        {
            e.preventDefault();
            var form = $(this);
            var foo = [];
            $('#category :selected').each(function(i, selected){
              foo[i] = $(selected).text();
            });
        });
    });

Aperient answered 20/4, 2016 at 4:46 Comment(13)

Possible duplicate of How to get multiple select box values using jquery? – Govea 20/4, 2016 at 4:51

i tried that only, but not response – Aperient 20/4, 2016 at 4:59

why you keep name of select box same for all select tag. this same name can override. – Hyrup 20/4, 2016 at 5:1

see you have running loop 4 times in php code – Hyrup 20/4, 2016 at 5:2

Ok i got where is the wrong check my answer – Govea 20/4, 2016 at 5:3

and id attribute can be unique in html page id="category" – Hyrup 20/4, 2016 at 5:3

remember whenever you want to access value through jquery with id attribute, id should be unique not repeated otherwise only first element get attention – Hyrup 20/4, 2016 at 5:6

correct your php code and use class instead of id then your code would work. – Hyrup 20/4, 2016 at 5:9

Thank you @SunnyS.M and Debojyoti Now i got my mistake and edited in select id , how to change in script?.. – Aperient 20/4, 2016 at 5:18

I've making test script please have a look at my answer. I just posting – Hyrup 20/4, 2016 at 5:23

Please see in console you will see all selected values there... I hope this help you – Hyrup 20/4, 2016 at 5:26

your posting command , how can i accept?.. – Aperient 20/4, 2016 at 5:44

when i upvote , it shows you cant upvote your own question?.. – Aperient 20/4, 2016 at 5:46

change text to val()

 $('option:selected').each(function(i, selected){
              foo.push($(selected).val());
            });

or:

var foo = [];
$('.box22').each(function(x,v){
var temp =[]
     $(v).find('option:selected').each(function(i, selected){
        temp.push($(selected).val());
     });
     foo.push(temp)
});

see demo for the second option here

Yolanthe answered 20/4, 2016 at 4:51 Comment(3)

Now i check that.. that selected value shows by single first option. But not working push element – Aperient 20/4, 2016 at 5:9

what do you mean by single first option? – Yolanthe 20/4, 2016 at 5:11

@Yolanthe thanks for reply, its about jsfiddle demo is not working, i was looking for something like this any idea how to achieve – Ijssel 18/10, 2018 at 17:17

Please run this sample code. This may help you

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form id="shortfilm" name="data">
<?php $genre=array(1=>'AAAAAAAAAAAAAA',2=>'BBBBBBBBBBBBBBB',3=>'CCCCCCCCC',4=>'DDDDDDDDDDDDDD',5=>'EEEEEEEEEEEEEEE');
for($i=0; $i<4; $i++)  { ?>
 <div class="box22">
      <div class="mcm">
           <input type="text" placeholder="Myself" id="coworkers" name="coworkers<?php echo$i?>[]" />
           <span class="bar"></span>
      </div>

      <div class="select2">
       <select class="category" name="category<?php echo$i?>[]" class="chosen-select ref-sel1" multiple >
           <?php
           foreach($genre as $key => $gen){
                echo '<option value='.$key.'>'.$gen.'</option>';
           } 
           ?>
       </select>
      </div>
 </div>
<?php } ?> 
<input type="submit" value="submit" />
</form>
<script>
$(document).ready(function()
{
    $('form#shortfilm').submit(function(e) 
    {
        e.preventDefault();
        var form = $(this);
        var foo = [];
        $('.category :selected').each(function(i, selected){
          foo[i] = $(selected).text();
        });
        console.log(foo);
    });
});
</script>
</body>
</html>

Hyrup answered 20/4, 2016 at 5:24 Comment(0)

Using the .val() function on a multi-select list will return an array of the selected values:

var selectedValues = $('#category').val();

And in your html <select id="category" multiple="multiple">

Also put the values of the $gen->genre_id in a variable and so like this

foreach($genre as $gen){
$genId = $gen->genre_id;
$genName = $gen->genre_name;
            echo '<option value='.$genId.'>'.$genName.'</option>';
       }

Also <select id="category" in a forloop will have many select elements with the same id,change that to category[$i] or use class

Govea answered 20/4, 2016 at 4:53 Comment(7)

@jana add this to the code and tell me if its working all right or not – Govea 20/4, 2016 at 4:56

Now do this and check – Govea 20/4, 2016 at 5:5

Have you implemented this @jana ? – Govea 20/4, 2016 at 5:8

edited the answer you have to stop forlooping the select element having the same id,Use class instead or append the loop number with the id – Govea 20/4, 2016 at 5:14

Can you upvote? :) Because my answer was useful in some way – Govea 20/4, 2016 at 5:24

i have low reputaion so cant to upvote.. After i reached i will do – Aperient 20/4, 2016 at 5:26

Thanks i know :) anyways upvoting the answer and question Sunny answer was useful too so upvoting his also – Govea 20/4, 2016 at 5:27

Recommended topics

Hot tags