Menu
I'm using a select tag in a form I'm making that allows multiple selections, but I want to make the maximum amount of selections upto 10. Is this possible using javascript or jquery?
Thanks in advance!
600
It is not possible to limit the number of visible elements in the select dropdown (if you use it as dropdown box and not as list). But you could use javascript/jQuery to replace this selectbox with something else, which just looks like a dropdown box. Then you can handle the height of dropdown as you want.
The select tag in HTML is used to create a dropdown list of options that can be selected. The option tag contains the value that would be used when selected. The default value of the select element can be set by using the 'selected' attribute on the required option.
You can select on any attribute and its value by using the attribute selector [attributename=optionalvalue] , so in your case you can select the option and set the selected attribute. $("div. id_100 > select > option[value=" + value + "]"). prop("selected",true);
<select>: The HTML Select element.
Here is some full code for you to use...gotta love the Google AJAX API Playground :-)
Edit 1: Note: this only lets you choose 5 because I didn't feel like copy/pasting another 10 options :-)
<!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Sample Select Maximum with jQuery</title> <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"> </script> <script type="text/javascript"> google.load("jquery", "1"); $(document).ready(function() { var last_valid_selection = null; $('#testbox').change(function(event) { if ($(this).val().length > 5) { alert('You can only choose 5!'); $(this).val(last_valid_selection); } else { last_valid_selection = $(this).val(); } }); }); </script> </head> <body style="font-family: Arial;border: 0 none;"> <select multiple id='testbox'> <option value='1'>First Option</option> <option value='2'>Second Option</option> <option value='3'>Third Option</option> <option value='4'>Fourth Option</option> <option value='5'>Fifth Option</option> <option value='6'>Sixth Option</option> <option value='7'>Seventh Option</option> <option value='8'>Eighth Option</option> <option value='9'>Ninth Option</option> <option value='10'>Tenth Option</option> </select> </body> </html> Demo
173
This would limit the user to 3 options:
$("select").on("click", "option", function () { if ( 3 <= $(this).siblings(":selected").length ) { $(this).removeAttr("selected"); } }); Fiddle: http://jsfiddle.net/2GrYk/
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
