title: MooTools - How to use getSelected()
body: <p>I'm trying to learn MooTools and am a TOTAL javascript noobie so please be gentle with me.</p>
  
  <p>What I'm tying to do is to change the state of a disabled input field (type is text) when a particular option is selected. The html looks a bit like tis:</p>
  
  <pre><code>&lt;select class="wide" id="selectBox" name="option&gt; 
    &lt;optgroup label="Common"&gt;
        &lt;option value="one"&gt;One&lt;option&gt;
        &lt;option value="two"&gt;Two&lt;option&gt;
        &lt;option value="three"&gt;Three&lt;option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="Less Common"&gt;
        &lt;option value="other"&gt;Other&lt;option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
  &lt;input id="other" type="text" disabled="disabled" /&gt;
  </code></pre>
  
  <p>This is what I was HOPING would give me the value to be checked in an if statement that would then change the input disabled to enabled:</p>
  
  <pre><code>window.addEvent('domready', function(){
   $$('#selectBox').addEvent('change',function(){
    var selection = $$('#selectBox').getSelected();
    alert(selection);
     });
  });
  </code></pre>
  
  <p>When the code us run (i.e. I select another value in the option box) all I get is <code>[object HTMLOptionElement]</code>.</p>
  
  <p>The documentation on mootools for this method is SPARSE and only says:</p>
  
  <blockquote>
    <p>Element Method: getSelected</p>
    
    <p>Returns the selected options of a
    select element.</p>
  </blockquote>
  
  <pre><code>Returns:
  
  * (array) An array of the selected elements.
  </code></pre>
  
  <p>Examples:
  HTML</p>
  
  <pre><code>&lt;select id="country-select" name="country"&gt;
      &lt;option value="US"&gt;United States&lt;/option
      &lt;option value ="IT"&gt;Italy&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$('country-select').getSelected(); //Returns whatever the user selected.
  </code></pre>
  
  <p>Note:</p>
  
  <p>This method returns an array, regardless of the multiple attribute of the select element. If the select is single, it will return an array with only one item.</p>
  
  <p>Totally confusing!</p>
  
  <p>Someone please tell me what I'm missing. I've also tried:</p>
  
  <pre><code>var selection = $$('#selectBox').getSelected().value; //and
  var selection = $$('#selectBox').getSelected('value'); //and
  //a WHOLE bunch of other wild ideas including
  var selection = $$('#selectBox').getSelected();
  alert(selection[0]);
  </code></pre>
  
  <p>Nothing comes out properly. In some cases I get <code>undefined</code> and in other cases I get the same <code>[object HTMLOptionElement]</code>.</p>