selectbox options "selected"

[Steve Onnis]

How can i get mootools to actually write the “selected” property into the HTML when creating new <option> elements?

 

It seems to select the option fine but it doesn’t actually write the property to the html

 

Steve

[hamburger]

did you tried this:

var option = new Element('option', {
'selected': true,
'value': "myValue"
}

cheers hamburger

[Steve Onnis]

Yup

Check this out...

http://jsfiddle.net/jgPHK/

[hamburger]

for me it seems to work fine. (firefox 11)
option 3 is selected.

[hamburger]

one more suggestion:
http://jsfiddle.net/jgPHK/2/

[Matthew Hazlett]

You can't, obj.setProperty('selected', 'true'); will just set the value to true. 
Best you can do is to set _selected to true then with regex you can change _selected to selected,

I wrote this awhile back:
http://jsfiddle.net/hazlema/BwczU/

Ran into the same issue.  Thats how I delt with it.

[Steve Onnis]

I know it selects it, but the actual HTML it renders i am expecting is

<option selected="selected" value="3">option 3</option>

-----Original Message-----
From: hamburger [mailto:bili...@web.de]
Sent: Monday, 23 April 2012 11:09 PM
To: MooTools Users
Subject: [Moo] Re: selectbox options "selected"

[Eric Patrick]

The Element.js file in MooTools core handles some attributes in a
custom manner. From a programmatic js perspective, I rarely encounter
a need for the HTML attribute. However, I _have_ encountered such a
need: when I want to reset for values to their original state. In this
case, I use:

this.getElements('option[selected=true]').each(function(o)
{ o.selected = true });

which requires an HTML 'selected' attribute.

You can use this:

document.id('someOptionIDTag').setAttribute('selected', 'selected');

But, that is, er, less than elegant.

The rest of my comments apply to:

https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js

Starting @ line 540, bools defined boolean attributes (including
'selected') and added a propertySetters function to simply call:

propertySetters[{'selected'}] = function (node, value) {
node[bool] = !!value;
};

This is why you don't see an HTML attribute for the 'selected'
property you are passing.

Element.js could be modified as follows, starting @ line 561, but I'm
not sure if this would break other behavior:

Object.append(propertySetters, {

'class': function (node, value) {
('className' in node) ? node.className = value :
node.setAttribute('class', value);
},

'for': function (node, value) {
('htmlFor' in node) ? node.htmlFor = value :
node.setAttribute('for', value);
},

'style': function (node, value) {
(node.style) ? node.style.cssText = value :
node.setAttribute('style', value);
},

// handle 'selected' in both the javascript and HTML?
'selected': function (node, value) {
node.selected = !!value; // not sure you really need this if you
have the next line(s)
if (value) node.setAttribute('selected', 'selected');
else node.removeProperties('selected');
}

});

I'll defer to others regarding the wisdom of such an override.

Eric

[Steve Onnis]

That would mean you would have to set an ID for every option and then
reference it after it has been added to the DOM before you could even set
the property on it. Kinda dumb yeah?

[Eric Patrick]

Well, you could wrap it in a generic function, but yes, less than elegant is definitely the rule on this.

Unless one overrides Element.js.

Eric

[Eric Patrick]

.setAttribute works; it bypasses the propertySetter overrides:

See  http://jsfiddle.net/ENqsh/ 

Again, not elegant :-)

Eric