Geek Answers Handbook

Jquery select all options in the next multiscreen selection window

I have several forms that require the use of multiple blocks with multiple choices. (list of branches, list of sources, list of products, etc.). Each form can have its own set of multiboxes for any of my clients.

I also created a link that allows the user to "select all" options in any of the multiple select fields. And while everything works fine! But I want to make jquery a little smarter.

Here is an example of what I encoded:

<table> <tr> <td><div id="allaffs" class="selectAll">select all</div></td> </tr> <tr> <td> <select name="affid[]" id="affid" size="15" style="width:230px;height:300" multiple="multiple"> <option value="0" selected="selected">--no affiliate assigned--</option> <? while($r = mysql_fetch_array($somequerystuff)){ ?> <option value="<?php echo $r['affid']; ?>" selected="selected"><?php echo $r['affname']; ?></option> <? } ?> </select> </td> </tr> </table> <table> <tr> <td><div id="allsources" class="selectAll">select all</div></td> </tr> <tr> <td> <select name="sourceid[]" id="sourceid" size="15" style="width:230px;height:300" multiple="multiple"> <option value="0" selected="selected">--no source assigned--</option> <? while($r = mysql_fetch_array($somequerystuff)){ ?> <option value="<?php echo $r['sourceid']; ?>" selected="selected"><?php echo $r['sourcename']; ?></option> <? } ?> </select> </td> </tr> </table> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(".selectAll").click(function(){ var theID = $(this).attr('id'); if(theID=='allaffs'){ $("#affid option").attr("selected","selected"); } if(theID=='allsources'){ $("#sourceid option").attr("selected","selected"); } }); }); </script>

And it works completely. But I usually add a few multi-boxes for other filtering reasons. I want jquery to detect a click event for the .selectAll class, but make it smart enough to select all options in the next available multi-position box. That way, I would not need to create a new line in jquery code for the new field.

+4
source share
2 answers

Instead of basing it on a position (the next available multi-position box), I would use the data attribute to store the identifier of the corresponding multiblock.

 <div class="selectAll" data-multi-id="sourceid">select all</div>

Then in the script:

 <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(".selectAll").click(function(){ var multi = $(this).data('multi-id'); $('#' + multi + ' option').attr('selected', 'selected'); }); }); </script>
+6
source

For me, a neat way would be to wrap the <select multiple="multiple"> block and "select all" in a specific parent element (for example, a div ), and then use .parent ()

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> </head> <body> <div> <span class="selectAll">Select all</span> <select multiple="multiple"> <option>1</option> <option>2</option> </select> </div> <div> <span class="selectAll">Select all</span> <select multiple="multiple"> <option>1</option> <option>2</option> </select> </div> <span class="selectAll">Select really all</span> <script> $(".selectAll").click(function () { $(this).parent().find('option').attr('selected','selected'); }); </script> </body> </html>
+3
source

More articles:


All Articles