Problem with validating a simple form!

[pappakaka]

Hi, I'm very new to JS and trying to learn. Currently I'm trying to make a form validation for my website. What happends in the code below is that when you select an option from a drop down select field, it creates a new list item inside a ul list. I got everything to work except one thing. How many list items you can create. I simply want to restrict the user from selecting more than 3 options from the drop down menu. If you select a 4th option an alert message should pop up but I can't get it to work..

 

Here's the JS code:

function selectGenres(select){
	  var option = select.options[select.selectedIndex];
	  var ul = select.parentNode.getElementsByTagName('ul')[0];
	     
	  var choices = ul.getElementsByTagName('input');
	  for (var i = 0; i < choices.length; i++)
	    if (choices[i].value == option.value) {
	      alert("The genre is already selected!");
	      return false;
	    }
	    else if (option == 3) {
	      alert("You can only select 3 genres!");
	      return false;
	    }
	     
	  var li = document.createElement('li');
	  var input = document.createElement('input');
	  var text = document.createTextNode(option.firstChild.data);
	     
	  input.type = 'hidden';
	  input.name = 'ingredients[]';
	  input.value = option.value;

	  li.appendChild(input);
	  li.appendChild(text);
	  li.setAttribute('onclick', 'this.parentNode.removeChild(this);');     
	    
	  ul.appendChild(li);
	}

 

And here is the form to validate:

<form name="form1" id="main_form" action="index.php" method="post">
  <input id="btn" name="btn" value="Submit" type="submit" />			
  <div id="form_con">						
    <table cellspacing="0" cellpadding="0">
      <tr>
<td valign="middle">

  <ul>

  </ul>

  <select id="genre_settings" onchange="selectGenres(this);">
	<option disabled="disabled">Genre...</option>
	<option value="01">Animation</option>
	<option value="02">Action</option>
	<option value="03">Adventure</option>
	<option value="04">Animals</option>
	<option value="05">Comedy</option>
	...
  </select>

        </td>
      </tr>
    </table>
  </div>
</form>

[teynon]

var selected = 0;
            function selectGenres(select){
	  var option = select.options[select.selectedIndex];
	  var ul = select.parentNode.getElementsByTagName('ul')[0];
	     
	  var choices = ul.getElementsByTagName('input');
	  for (var i = 0; i < choices.length; i++)
	    if (choices[i].value == option.value) {
	      alert("The genre is already selected!");
	      return false;
	    }
	    else if (selected >= 3) {
	      alert("You can only select 3 genres!");
	      return false;
	    }
                    selected++;
	     
	  var li = document.createElement('li');
	  var input = document.createElement('input');
	  var text = document.createTextNode(option.firstChild.data);
	     
	  input.type = 'hidden';
	  input.name = 'ingredients[]';
	  input.value = option.value;

	  li.appendChild(input);
	  li.appendChild(text);
	  li.setAttribute('onclick', 'this.parentNode.removeChild(this);');     
	    
	  ul.appendChild(li);
	}

[pappakaka]

Thank you!