3

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

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

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

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].

1
  • This comes years after the fact but i now use jQuery - and as a consequence, I've forgotten how to use MooTools! ROFL! I mention this because I'd love to set the answer that works but cause of the relapse in not knowing MooTools I can't. Regardless, thanks to those who answered! Mar 10, 2012 at 1:18

6 Answers 6

15

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 :)

8
  • Dimitar, sorry, didn't see your response before typing a thanks to Vincent... Thanks to you as well! I understand all you said & thank you very much for clarifying the usage of the $$. As I was basically doing all sorts of things by trial and error - somewhere along the way I wasn't gettin the selected ID by using just the $; must've been something wrong elsewhere. Also, as I mentioned to Vincent just a sec ago, I'm aware of all the unclosed tags - my bad. Was rushing a response & typed the code from scratch as opposed to just a copy paste. That's why all the unclosed tags. LOL. Thanks again! Jul 27, 2010 at 13:33
  • Okay, this is a lot of huzza bout nothing but... I tried adjusting the code to use a single $ as opposed to $$: window.addEvent('domready', function(){ $('#selectProvince').addEvent('change',function(){ var selection = $('#selectProvince'); var sel = selection[0].value; if(sel === "otherProvince") { alert(sel); } }); }); and it doesn't work (with mootools). The $$ does work. Any comments? Jul 27, 2010 at 13:38
  • yes. $("selectProvince") - no # needed. also, within the change callback, this is bound to the original selector hence all you need is var selectedValue = this.get("value"); $("newelement").set("value", selectedValue); in mootools you tend to use getters and setters to access properties as opposed to .value direct. just try the link i posted on jsfiddle and you will see what i mean. Jul 27, 2010 at 14:23
  • Thanks for taking the time to clarify Dimitar. So then, if you want to use CSS style selection then use the $$ otherwise it is just the string-name of the id/selector ('selector'). Got ya. Guess I was all hung up on jQuery style coding. But one thing - what if you have multiple elements that are different types (id, class, name etc.) that have the same string-name (#select, .select, name="select" etc.). What happens then? I know that there's a way to filter the resulting grabbed elements but doesn't just using the $$ instead make more sense (and less code)? Jul 27, 2010 at 14:37
  • One more time, just wanna thank you for your time and efforts on my behalf, am much obliged. Read over your last explanation a few times before I understood it. I am tied up in assignments in class but am definitely gonna sit after this course is finished and slowly and thoroughly learn javascript (lynda.com et al). :o) Jul 27, 2010 at 14:40
4

late reply but I was facing the same issue and solved it in this (simple) way in Mootools:

$('selectBox').getSelected().get('text')
0
2

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>

2
  • Hi Vincent! Thanks very much for your response!!! I'll try the second option. I had already tried the first option (mainly out of frustration) & yes, it did work. I've not studied javascript so I'm not very familiar with all the native elements/methods etc. of the DOM but we WERE told about doc.gtElByID in class. I've just started learning coding in April this year so it's ALL new. With regards to all the unclosed tags in my example, thank you for pointing them out. Will remember to be cleaner when typing next time. It wasn't a copy paste of code but a speed type past bedtime... LOL. THANKS!! Jul 27, 2010 at 13:25
  • Just coming back to Vincent's comment - tried the second option ( var sel = selection[0].value; alert(sel); ) and it worked!!! Thank you very much! Jul 27, 2010 at 13:28
0

All you need to do is:

$('country-select').getSelected().get('value')[0];
0

Quick, hackish way:

alert($('selectBox').value)

Verbose, recommended way:

var selectBox = document.id('selectBox');
alert(selectBox.get('value'));
0

.getSelected() returns an array. See the docs: http://mootools.net/docs/core/Element/Element#Element:getSelected . My Code is :

var $obj=$$('#id').getSelected()[0];
alert( $obj.get('text') );
alert( $obj.get('value') );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.