ansaurus

Question

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

Answer 1

+2 A:

Using jQuery you can attach a function to the change event and since it is a multiple select the val() will be an array. You can always check the length of the array and do something if its a predefined size. The following code demonstrates how you will know how many items are selected.

  $("#select").change(function(){
        alert($(this).val().length);
  });

Vincent Ramdhanie 2010-01-12 02:15:42

that will help a lot. is there a way to deselect evrything in a select box, also?

tominated 2010-01-12 02:21:15

@tominated - Using jQuery, you can simply call `$('#myselectbox_id').val(null);`

Topher Fangio 2010-01-12 02:26:21

You can use this: `$("#select").val([]);` to set no options in the select list.

Vincent Ramdhanie 2010-01-12 02:26:36

or as @Topher suggested.

Vincent Ramdhanie 2010-01-12 02:27:15

Answer 2

+1 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <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"&gt;    </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>

Topher Fangio 2010-01-12 02:23:47

that's almost perfect! it doesn't select it again if last_valid_selection is an array. Thanks, though!

tominated 2010-01-12 02:27:07

I'm not sure what you mean. What doesn't select it again if `last_valid_selection` is an array?

Topher Fangio 2010-01-12 02:36:16

You may want to move `last_valid_selection` out of the global scope and into the `ready` anonymous function.

Justin Johnson 2010-01-12 02:37:42

@Justin Johnson - Good point. I'm still confused as to what doesn't work though. Works perfectly in Chrome (can't test IE at the moment).

Topher Fangio 2010-01-12 02:45:10

Works fine in FF 3.5.6 as well. I don't know what the down vote is for

Justin Johnson 2010-01-12 03:04:16

it's not working with the code i have so far. i have a comment on the op with soem more info on what i'm doing

tominated 2010-01-12 03:14:58

@tominated - You downvoted me because the example I gave you doesn't work for your exact situation?

Topher Fangio 2010-01-12 04:34:25

@Topher, don't answer unless you're prepared to read minds! :)

Jonathan Sampson 2010-01-12 05:43:40

@Jonathan +1 - LMAO. Thanks, I'm about to head to bed and I needed a laugh :-)

Topher Fangio 2010-01-12 05:59:06

Answer 3

+1 A:

This would limit the user to 3 options:

$("#mySelect option").click(function(e){
  if ($(this).parent().val().length > 3) {
    $(this).removeAttr("selected");
  }
});

Jonathan Sampson 2010-01-12 02:27:58

Answer 4

A:

figured it out! here's the resulting code:

$(document).ready(function(){

var last_valid_selection = null;
var selected = "";

$("#recipient_userid").change(function(event){

    if ($(this).val().length > 10) {

        alert('You can only choose 10!');
        $(this).val(last_valid_selection);

    } else {

        last_valid_selection = $("#recipient_userid").val();

        $("#recipient_userid option:selected").each(function () {
            selected += "<li>" + $(this).text() + "</li>";
        });

        $("#currentlySelected").html(selected);
        selected = "";
    }

}).change();

});

Thanks for all your help guys!

tominated 2010-01-12 03:23:53

Tominated, this is not a forum. Your contributes ought only exist in the original question (you can edit it as much as you like). You should accept one of the many fine answers that were provided here.

Jonathan Sampson 2010-01-12 05:41:00

Tominated, Jonathan is absolutely correct. The idea is to ask a question and select the best answer (you even get a few reputation for doing so). Very rarely do I not select an answer and even more rare is it that I answer my own question. However, this community is here to help each other, and I'm glad we helped you.

Topher Fangio 2010-01-12 06:02:08

Sorry guys, I was unaware about that.

tominated 2010-01-15 02:35:21

ansaurus

tags:

views:

answers:

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

related questions