MooTools - How to use getSelected()

Question

Been searching for this for over a day on google without any answers. Finally putting fingers to keyboard for this. So frustrating!

I'm trying to learn MooTools and am a TOTAL javascript noobie so please be gentle with me.

Okay, 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:

<select class="wide" id="selectBox" name="option> 
  <optgroup label="Common">
      <option value="one">One<option>
      <option value="two">Two<option>
      <option value="three">Three<option>
  </optgroup>
  <optgroup label="Less Common">
      <option value="other">Other<option>
  </optgroup>
</select>
<input id="other" type="text" disabled="disabled" />

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:

window.addEvent('domready', function(){

$$('#selectBox').addEvent('change',function(){ var selection = $$('#selectBox').getSelected(); alert(selection); }); });

So, when the code us run (i.e. I select another value in the option box) all I get is "[object HTMLOptionElement]".

I'm ready to start plucking my hair out one strand at a time... this is so frustrating! The documentation on mootools for this method is SPARSE and only says:

Element Method: getSelected

Returns the selected options of a select element.

Returns:

* (array) An array of the selected elements.

Examples: HTML

<select id="country-select" name="country">
    <option value="US">United States</option
    <option value ="IT">Italy</option>
</select>

JavaScript

$('country-select').getSelected(); //Returns whatever the user selected.

Note:

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.

Totally confusing!

Someone please tell me what I'm missing... I've also tried:

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]);

Nothing comes out properly. In some cases I get "undefined" and in other cases I get the same "[object HTMLOptionElement]".

Help!

Answer 1

So Complex!

You don't need to do such a complex thing, this would suffice:

var selection = document.getElementById("selectBox").value;
alert(selection);

That should get you the selected text.

But if you wanted to use mootools, I guess that this would work (I'm not going to try it)

var selection = $('selectBox').getSelected();
alert(selection[0].value);

---

Also this has some problems:

<select class="wide" id="selectBox" name="option> 

You don't need the name attribute, as it is basically the same as id. Also if you do have both, then they should probably be the same. I.e. id="selectBox" and name="selectBox

Your name tag should be closed.

Also in your sample, you had a lot of <option>...<option> which should be <option>...</option>

Answer 2

so many things wrong, not sure where to begin.

$$() is a collection operator (alias for document.getElements() which returns multiples based upon a selector) - not appropriate to use for an id.

you want document.id("idhere") or $("idhere")

for mootools 1.2+

document.id('selectBox').addEvent('change',function() {
    alert(this.get("value")); // get value
    alert(this.getSelected().get("value")); // gets the option that's selected and then it's value
});

make sure you check your markup - you don't close the options, you have a missing " from name="option> as well.

getSelected is there as a method as some selects use multiple selection so doing selectEl.get("value") will not report anything meaningful. any other case, .get("value") is fine.

check it working: http://www.jsfiddle.net/dimitar/SmShF/

have fun and read the manual :)