How do I limit the number of selected option tags within a select tag in jQuery and javascript?

Question

I am trying to use jQuery to limit the number of selected option tags in jQuery to 100. What am I doing wrong? The select tag looks like this:

<select name="order">
<option value="1" selected>Order Name</option> ...

after a user selects one or more option tags... Still not sure how to get the event handler to work.

var countSelectedOptionTags
$("select[name='order']").change(function() {
  $("select[name='order']").children('attr="selected"').each(function() {
     countSelectedOptionTags++;
  });
  if countSelectedOptionTags > 100 
  {
     alert("You can not select more than 100 option tag.");
     return;

  }   //I need the option tags that have the selected attribute

Answer 1

Try this:

$("select[name='order'] option:selected")

will give you all the options that are selected.

$("select[name='order'] option:selected:gt(99)");

will give options that are selected and have an index greater than 100

var countSelectedOptionTags = 0;
$("select[name='order']").change(function() {
    var selectedOptions = $("select[name='order'] option:selected");
  countSelectedOptionTags = selectedOptions.length;
  if countSelectedOptionTags > 100 
  {
     alert("You can not select more than 100 option tag.");
     return;
  }
    .
    .
    .
});