How do you limit options selected in a html select box?

by

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

​

More Related Contents:

  1. Stop form refreshing page on submit
  2. Clearing using jQuery
  3. Submitting a form on ‘Enter’ with jQuery?
  4. How to send a JSON object using html form data
  5. How to submit an HTML form without redirection
  6. Prevent form redirect OR refresh on submit?
  7. Drop-down box dependent on the option selected in another drop-down box
  8. How to prevent page from reloading after form submit – JQuery
  9. Property ‘submit’ of object # is not a function
  10. Adding rows dynamically with jQuery
  11. Best JavaScript solution for client-side form validation and interaction? [closed]
  12. Change the content of a div based on selection from dropdown menu
  13. jQuery Change event on an element – any way to retain previous value?
  14. Submit form after calling e.preventDefault()
  15. Trigger standard HTML5 validation (form) without using submit button?
  16. How can I get all a form’s values that would be submitted without submitting [duplicate]
  17. Trigger standard HTML validation (form) without using submit button? [duplicate]
  18. submit event does not fire if submit initiated programmatically
  19. Get content of span
  20. copying the value of a form’s file input field to another form’s input field
  21. Adding input elements dynamically to form
  22. HTML form action and onsubmit issues
  23. TypeError: p.easing[this.easing] is not a function
  24. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  25. JavaScript – head, body or jQuery?
  26. Simulate drop file event
  27. How do I capture a key press (or keydown) event on a div element?
  28. Passing JSON data from php to html-data attribute and then to Javascript
  29. How to get an element by its href in jquery?
  30. Keep tabbing within modal pane only

Leave a Comment